During our last instalment of this series, we began talking about organizational tables. This time around, we’ll be discussing some of the more advanced portions on tables in HTML.

If you’re using a table to organize data, you’ll likely have column headers that identify the type of data contained within that column. Using what we’ve previously covered, you could simply use a tr at the beginning of the table and use CSS to stylize them. However, there is a better way.

HTML contains a method to specify a table header, footer and body. We can use this method by wrapping the appropriate rows in thead, tfoot and tbody tags, respectively. In the thead section, cells must use th instead of td. The order of these “groups” is also vital. The thead and tfoot groups must be before the tbody group (the footer will be still appear below the body).

This method has a number of advantages over simply ordering your rows to create a header and footer. For starters, these three tags provide semantic meaning to your table. Having the footer above the body, in the code, allows the browser to render the footer before the (potentially long) body has loaded. Additionally, when you’re generating your body via a programming language (such as PHP), having the (likely) static header and footer before your dynamic body code will be neater.

Example:

[html]<table>
<thead>
<tr>
<th>ID</th>
<th>Surname</th>
<th>First Name</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<td>ID</td>
<td>Surname</td>
<td>First Name</td>
<td>Email</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>192<td>
<td>Smith</td>
<td>John</td>
<td>john.smith@example.com</td>
</tr>
<tr>
<td>193</td>
<td>Doe</td>
<td>Jane</td>
<td>jdoe282@example.com</td>
</tr>
</tbody>
</table>[/html]