Tables are probably the most important formating tag in HTML. The page you are
currently looking at has 3 tables on it (not counting examples). The first table creates the white area you see. The second
table creates the side bar and the main text area you are reading right now. The third aligns the
links in the side bar and gives them the proper spacing.
Tables are a little more complicated to setup then the previous tags that I've talked about. A
table is defined by the table tag, <TABLE></TABLE>.
Tables are broken up into three main sections; the header, the body, and the footer. These three
sections are denoted by the following tags within the main table tag;
<THEAD></THEAD>,
<TBODY></TBODY>,
<TFOOT></TFOOT>. As you'll see in the
example below, the order these tags appear in a table does not matter. The header is always
above the body and the footer below the body.
The rows and data cells of the table are defined within there respective header, body, or footer tags.
You probably noticed that I said rows and data cells not rows and columns like you would normally
think of a table. That's because in HTML you define rows and put data cells in the rows to
make columns. If you put three data cells in each row you get a table with three columns.
A row is defined by the table row tag <TR></TR>.
The data cell is defined with the table data tag <TD></TD>.
Since the number of cells in a row defines the number of columns in the table, you must
be careful when building your table so that you include the same number of cells in each row.
If you place different numbers of cells in each row, you will get blank spaces in the rows with
fewer data cells.
The table tag also has several important attributes associated with it like most
HTML tags. The most common attributes in the table tag are; border sets the width of
the border around the table; cellspacing sets the distance between cells; cellpadding
sets the distance between the object in the cell and the border of the cell; width sets the
width of the table, can be a percentage of the screen or an absolute value in pixels.
The table row tag has several attributes as well. align sets the horizontal alignment of
objects in the row; valign sets the vertical alignment of objects in the row; bgcolor
sets the background color of the cells in the row.
The table data tag has several attributes too. align sets the horizontal alignment of the
objects in the cell; valign sets the vertical alignment of objects in the cell;
bgcolor sets the background color of the cells in the cell; colspan sets the number
of cells this one cell should span; rowspan sets the number of rows the cell should span;
height sets the height of the cell; width sets the width of the cell; nowrap
prevents text from being automatically wrapped to a second line if it extends past the limits of the
cell.
Note: The attributes in the table data tag override the attributes in the table row tag. If you set
the align tag for the row to center and then set the align tag in a cell in that row
to left, the text will be aligned to the left; however the remaining cells in that row will still
be aligned to the center.
<TABLE BORDER = "1" CELLSPACING = "5" CELLPADDING = "5" WIDTH = "100%">
<TFOOT>
<TR>
<TD COLSPAN = "3">This is the footer of the table</TD>
</TR>
</TFOOT>
<THEAD>
<TR>
<TD COLSPAN = "3">This is the header of the table</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD VALIGN = "top">Row 1; Cell 1</TD>
<TD ALIGN = "right"><BR>Row 1;<BR>Cell 2<BR></TD>
<TD>Row 1; Cell 3</TD>
</TR>
<TR ALIGN = "center">
<TD COLSPAN = "2">Row 2; Cell 1</TD>
<TD BGCOLOR = "#C0C0C0">Row 2; Cell 2</TD>
</TR>
</TBODY>
</TABLE>
| This is the footer of the table |
| This is the header of the table |
| Row 1; Cell 1 |
Row 1;
Cell 2
|
Row 1; Cell 3 |
| Row 2; Cell 1 |
Row 2; Cell 2 |
