5.3 Table Layouts

There are 3 more tags that can be used with tables:

TagPurpose
theadDefines a table head section
tbodyDefines a table body section
tfootDefines a table footer section

It isn't strictly necessary to use these tags but if a table is fairly large and complex, they can be useful to help break it down into sections. Tables were once used extensively for controlling page layout, which has since been superceded by the use of CSS, which we will come to later. For example:

<table style="width:100%;" cellspacing="0" border="0">
<thead>
<tr>  
<th colspan="3" style="width:100%; height:100px;background-color:#990000;">
<h1>Header</h1>
</th> 
</tr>
</thead>
<tbody>
<tr style="height:600px;"> 
<td style="width:20%; background-color:#e0e0e0; vertical-align:top;">
<ul>
<li><a href="#" title="DUD LINK">Page 1</a></li>
<li><a href="#" title="DUD LINK">Page 2</a></li>
<li><a href="#" title="DUD LINK">Page 3</a></li>
</ul>
</td>
<td style="width:60%; background-color:#888888; vertical-align:top;">
<p>Lorem ipsum dolor...</p>
</td>
<td style="width:20%; background-color:#ffffaa; vertical-align:top;">
<ul>
<h3>Archives</h3>
<li><a href="#" title="DUD LINK">October 2009</a></li>
<li><a href="#" title="DUD LINK">Novemeber 2009</a></li>
<li><a href="#" title="DUD LINK">December 2009</a></li>
</ul>
</td>
</tr>
</tbody>
<tfoot>
<tr height="100px">
<th colspan="3" style="width:100%; background-color:#efddaf;">
<h3>Footer</h3>
</th>
</tr>
</tfoot>
</table>
</body>
</html>

Click here to see the result.

Notice that here we have introduced a useful attribute that can be used with tables, namely the width attribute. The value for this can be set using pixels, like above, or as a percentage (of the browser window).

Anything can be inserted into tables, such as text, links and images. As we mentioned earlier, tables were once used extensively for controlling page layout too but this has been superceded by the use of CSS, which we will come to later. Therefore tables should only be used for tabular data, not for organising layout.