Tabular data
XHTML tables are capable of presenting complex tabular data with grouped columns,
grouped rows, headers and footers, however, we will just
look at the basic representation of a table.
The basic <table> element contains one or more rows represented by <tr>
elements and each row will contain one or more cells of data represented by <td>
elements. If a row or column contains headers the the particular <td> elements
should be replaced by <th> elements. So, a table with 2 rows and three column,
where the first row is headings and the first column is headings would be coded
like this:
<table summary="Comparison of rainfall in Chester and Wrexham">
<caption>Comparison of rainfall in
Chester and Wrexham</caption>
<tr>
<th>Yearly Rainfall</th>
<th>Chester</th>
<th>Wrexham</th>
</tr>
<tr>
<th>Inches</th>
<td>35</td>
<td>42</td>
</tr>
<tr>
<th>No. of wet days</th>
<td>67</td>
<td>82</td>
</tr>
</table>
and would look like this:
Comparison of rainfall in Chester and Wrexham
| Yearly Rainfall |
Chester |
Wrexham |
| Inches |
35 |
42 |
| No. of wet days |
67 |
82 |
You can leave out the <caption> element in a table, but you must always provide
the 'summary' attribute, otherwise your page will fail accessibility tests.
More complex structures
If you have a data table with a more complex structure you may want to take advantage
of row and column grouping elements.
The <thead>, <tfoot> and <tbody> elements can be used to group
rows of data. Note: <tfoot> must appear before <tbody>. You can have
several <tbody> sections.
The <colgroup> and <col> elements can be used to specify columns and
column groupings. Be aware, though, that these elements have attributes which specify
presentation aspects such as column width. Unless there is a good reason, you should
perform layout by using 'id' or 'class' attributes and CSS. See the
CSS Tutorial for information about this.