HTML Tables

Tables are a good way of formatting information that fits logically into cells of a row/column arrangement. They are quite flexible, with a number of different options. One interesting one is "spanning" where a cell may span more than one row or column. All tags are in pairs, like <table> ... </table> which delimits a table. Within a table there are rows, within a row there are Detail items. Within the detail item is the cell's contents. The tags are: (an example follows)
<table> - defines a table. May have border, padding, etc.
<tr> - delimits a row
<td> - defines a cell, with its contents
<th> - like <td> but with the sense of a "header", as in Name below.
<table border=1>
<tr>
<th> Name </th>
<td colspan="2" align="center"> Phones </td>
</tr>
<tr>
<td> Spiderman </td>
<td> 822-9600 </td>
<td> 911 </td>
</tr>
<tr>
<td>Kermit</td>
</tr>
</table>
This will look like:

Name Phones
Spiderman 822-9600 911
Kermit
see also Table Example

Not for page formatting!

Tables are appropriate for tabular data. Use a table to line up columns, don't try to use spacing (except in <pre> tags).
It was once the case that tables were the only way to control layout of a web page, and you will find many pages on the 'Net with nested tables to do this. The resulting HTML code is convoluted and ugly. You should not do this, since CSS now offers an elegant solution to page layout


Back to Contents
Home page of Lin Jensen