Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 73

interesting. The following markup is for a two-column table with two rows of data (the
embedded style is to provide a border to act as a visual aid to better distinguish the
layout of the table; ideally, its effect should be placed in an external CSS file in a pro-
duction environment):
<style type="text/css">
td { border: 1px solid #ff0000; }
</style>
<table>
<tr>
<td>Name</td>
<td>Place of residence</td>
</tr>
<tr>
<td>Anselm Bradford</td>
<td>Auckland</td>
</tr>
<tr>
<td>Paul Haine</td>
<td>Oxford</td>
</tr>
</table>
This will create a basic table, but let's take it a little further with table headers.
Adding table headers
You can make this table a bit clearer and easier to read by marking headers at the top of
the table to indicate columns. Although you can do this by adding a class name to each
table cell and then styling it with CSS, a far better way is to turn those uppermost table
cells into bona fide table headers with the th element used in place of td .
<table>
<tr>
<th>Name</th>
<th>Place of residence</th>
</tr>
...