Tables are intended for the structuring of tabular date. However, they are also used a lot for presentation (eg splitting a page up into columns). With the improvement of support for CSS it shouldn't be too long before this latter use becomes less commonplace.
<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="2">
<TR>
<TD>This is the first cell of this table</TD>
<TD>This is the second cell of this table</TD>
</TR>
<TR>
<TD COLSPAN="2">This cell spans across two columns</TD>
</TR>
</TABLE>The above code produces the following result:
| This is the first cell of this table | This is the second cell of this table |
| This cell spans across two columns | |
TABLE is a block element (and hence can not be nested inside inline elements or inside certain block elements, such as P). It takes various attributes: BORDER is the width of the border around the table in pixels. CELLPADDING is the space, in pixels, between the the edge of each cell and it's content. CELLSPACING is the space, again in pixels, between each cell.
| Cell One | Cell Two |
| This table has zero cellspacing, 6 pixels of cellpadding and a 1 pixel border | |
| Cell One | Cell Two |
| This table has 6 pixels of cellspacing, zero cellpadding and a 1 pixel border | |
| Cell One | Cell Two |
| This table has zero cellspacing and zero cellpadding but a 6 pixel border | |
TABLE can also have a WIDTH set, either as a pixel width or as a percentage. This is often not needed for a proper table, but is sometimes essential when trying to use tables to produce a particular layout.
TABLEs can be aligned to the left, right or center of the page. If left or right aligned then copy will flow alongside them as with IMGs.
| This table takes up 50% of the width of the page and is aligned to the left |
The default alignment is left, but if you omit the ALIGN="left" attribute the table will be at the left of the page, but the rest of the content will not flow alongside it.
TR represents the Table Row element. It can only sit inside the TABLE element (or the THEAD, TBODY and TFOOT elements in the poorly supported advanced table model). It marks the rows of the table (all tables are organised by row rather than by column). There are a couple of main attributes ALIGN and VALIGN. ALIGN has values of left (default), right, center and justify and tells the browser how to align the content of all the cells in that row. VALIGN does the same for the vertical alignment of the content; values are top, middle (default) and bottom.
TD means Table Data and marks each individual cell of the table. All content must go inside a TD (or the closely related TH). Any content can sit inside a TD, including other TABLEs. TD takes the ALIGN and VALIGN values just like TR; values set on a TD over ride values set for a whole roiw via TR.
| The contents of this table row are top and right aligned. | Except for this cell which is bottom and left aligned. | This cell is once again top and right aligned because those are the values set for the whole row. If I add some more random text the vertical alignment of the first two cells should become evident. |
TDs also take WIDTH as attribute. Again it can be a pixel value or a percentage. There are problems with both. When using pixel values you have problems when the browser window is much larger or smaller than you expected. And percentages are vaguely defined: are they are percentage of the table width or of the browser window width? So long as the TABLE has WIDTH="100%" it's safe to use percentage TD widths as the two interpretations are the same. Otherwise, make sure that at least one cell has no width dfefined, thus allowing the table leeway to resize itself to fit any browser window.
TH means Table Header and is the same as TD except that it is intended to mark the contents as being a header for a row or column. Normally the contents are rendered as bold and center aligned. The alignment is easily over ridden with an ALIGN attribute, but the bold can only be over ridden with CSS, as there's no such element as <NOTBOLD>.
It's possible for a TD to span across more than one row or column as in my examples at the top of this page. The attributes to do this are ROWSPAN and COLSPAN. The cells are counted from the top and the left. The following examples should help to make it clear what's what.
| Row One, Cell One | Row One, Cell Two |
| Row Two, Cell One | Row Two, Cell Two |
<TABLE BORDER="1">
<TR>
<TD>Row One, Cell One</TD>
<TD>Row One, Cell Two</TD>
</TR>
<TR>
<TD>Row Two, Cell One</TD>
<TD>Row Two, Cell Two</TD>
</TR>
</TABLE>| Row One, Cell One | |
| Row Two, Cell One | Row Two, Cell Two |
<TABLE BORDER="1">
<TR>
<TD COLSPAN="2">Row One, Cell One</TD>
</TR>
<TR>
<TD>Row Two, Cell One</TD>
<TD>Row Two, Cell Two</TD>
</TR>
</TABLE>| Row One, Cell One | Row One, Cell Two |
| Row Two, Cell Two |
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="2">Row One, Cell One</TD>
<TD>Row One, Cell Two</TD>
</TR>
<TR>
<TD>Row Two, Cell Two</TD>
</TR>
</TABLE>