HTML notes 4: Tables
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
A table is a grid made up of ROWS and CELLS within each ROW (columns).

Draw a SKETCH and plan BEFORE beginning your table.

<table> </table>
<tr> </tr> --ROW
<td> </td> --CELL

1 2 3
4   6

Code:

<table width="100" border=2>

<tr> --row 1

<td>1</td> --cell 1
<td>2</td> --cell 2
<td>3</td> --cell 3

</tr>
<tr> --row 2

<td>4</td> --cell 4
<td>&nbsp;</td> --cell 5
<td>6</td> --cell 6

</tr>

</table>

&nbsp; is for displaying an EMPTY cell.


1 2 3
4   6

<td style="background-color:#CC0000;">1</td>
<td style="background-color:#999900;">6</td>

BORDER=n --n=number of pixels.


1 2 3
4 5 6

<table width="100" border="10">



1 2 3
4 5 6

<table BORDER="0"> - use this for images with NO BORDER!


WIDTH=n --n=number of pixels
Overall Table Width = (w of columns) + (w of borders) + (w of cellspacing) + (w of cellpadding)

Use WIDTH attribute in <TABLE WIDTH=600> OR <TD WIDTH=100>
Generally you use WIDTH only with the FIRST cell in each column, but if it spans more than one column, you may need to add WIDTH to each cell.

ALIGN="direction" --justification on page: CENTER, RIGHT or LEFT.


1 2 3
4 5 6
<table width="100" border=2 align="center">

CELLSPACING=n --n=pixels; Adds space BETWEEN individual cells; Default=2.

CELLPADDING=n --n=pixels; Adds space AROUND the contents of a cell (between the contents and its border); Default=1;

 

Attributes for the <TR> row tag
HEIGHT=n --n=number of pixels
Generally you use HEIGHT with row tag and it will effect height of cells within it.

 

Attributes for the <TD> cell tag
ALIGN="direction" --(left, right, center) ALIGN CONTENTS of a CELL HORIZONTALLY (text, images, etc.)

VALIGN="direction" --(top, middle, bottom) ALIGN CONTENTS of a CELL VERTICALLY within the cell

You can also use these in the TR tag to apply that to all the cells in that ROW!!

COLSPAN=n, --n = number of COLUMNS to span (horizontal) (to span across more than one column (width))

ROWSPAN=n, --n = number of ROWS to span (vertically) (to span across more than one row (height))

 

Lesson 7
1) Create a TABLE that has the following attributes:

• Table should be 600 x 500, background color should be a light red and a border of any width except 0.
• 3 rows with 5 cells per row. Create a pattern by changing the background color of individual cells to a color of your choice.
• In the cells that did NOT have the background color changed, put links to outside websites: either text links or image links or both.
• Use one colspan and one rowspan to alter the grid of the table.

2) Try placing a table within the cell of another table. This is called: NESTED tables.