Quick Links

HTML Tables

Getting people to understand information is a lot easier if the data is presented in an organized manner. A table provides a means of doing this; it can be made to look like a spreadsheet, with or without borders for the cells.

Tables are much more complex than the overall structure of an HTML document: the information in each cell can be aligned any which way; cells can span multiple columns or rows; text can be colored and pictures can be placed in cells.

The following source code and example output will be discussed.

Source Code

Rendering by Browser

<table align=center cellpadding=3 border=1>
<tr>
<th colspan=4>1960 Pittsburgh Pirates</th>
</tr>
<tr>
<th>Name</th>
<th>AB</th>
<th>H</th>
<th>BA</th>
</tr>
<tr>
<td align=left>Smoky Burgess</td>
<td align=right>337</td>
<td align=right>99</td>
<td align=right>.294</td>
</tr>
<tr>
<td align=left>Roberto Clemente</td>
<td align=right>570</td>
<td align=right>179</td>
<td align=right>.314</td>
</tr>
<tr>
<td align=left>Bill Mazeroski</td>
<td align=right>539</td>
<td align=right>147</td>
<td align=right>.273</td>
</tr>
</table>

1960 Pittsburgh Pirates
Name	AB	H	BA
Smoky Burgess	337	99	.294
Roberto Clemente	570	179	.314
Bill Mazeroski	539	147	.273

The Tags

The `T'able tags (<TABLE>...</TABLE>) set the table off from the rest of the document. Failure in terminate the table with the closing tag confuses some browsers and yields unexpected results. There are many attributes which can be specified. Here we have just three: "align" to specify how the table should be positioned; "cellpadding" to indicate how many pixels of space should surround the cell entries; and "border" to set the thickness of the lines separating the cells.

Each row in the table should be delimited by the `T'able `R'ow tags (<TR>...</TR>).

Within a row, each cell is delimited by either of two pairs of tags. The `T'able `D'ata tags (<TD>...</TD>) are used for normal data. Special `T'able `H'eading tags (<TH>...</TH>) can be used for column and row labels; on most browsers, these tags bold and center the text. The usual alignment attribute can be specified for horizontal positioning; on most browsers, the default is "align=left", but Lynx uses "align=center". (To avoid unexpected rendering of text, I have specified "align" values for all table data entries.) You can also set vertical alignment with the "valign" attribute, which accepts the "top", "middle" and "bottom" values. HTML also provides attributes to have a cell correspond to two or more neighboring cells, either horizonally using "rowspan" or vertically with "colspan". (colspan is used in the row with the main table title.)

Special Uses: Nested Tables

Tables are also frequently used to position information in specific orientations and positions on the page.

Here is a technique that I used for the main page of a web site I created for a four-language dictionary from 1744.

The structure of this header is a table which contains three entries in a single row: the first cell consists of its own table for a picture and its caption; the second has the web page title; and the third, like the first, contains its own table for a picture and its caption. Thus, I have nested two tables inside a larger one. Note the use of comments which were used so I could understand the structure when I might later cannibalize the code.

Also, note the use of the "width=100%" attribute/value pair to ensure that the header always spans the whole width of the page, no matter how large the browser window is.

<table border=0 width=100%>
<tr>

<!-- picture and caption at left -->
<td>
<table border=1>
<tr>
<td>
<A href="title-1744.gif"><img align=left src="title-1744t.gif"></a>
</td>
</tr>
<tr>
<td ALIGN="CENTER">
Title Page</td>
</tr>
</table>
</td>
<!-- END OF picture and caption at left -->

<!-- page title -->
<td valign=middle align=center>
<h1>Megiser's Search Engine<br>(1744)</h1>
</td>
<!-- END OF page title -->

<!-- picture and caption at right -->
<td>
<table align="right" border>
<tr>
<td><A href="page-1744.gif"><img align=right src="page-1744t.gif"></a>
</td>
</tr>
<tr>
<td ALIGN="CENTER">
Sample Page</td>
</tr>
</table>
</td>
<!-- END OF picture and caption at right -->

</tr>
</table>