HTML and CSS Reference
In-Depth Information
<td id="jeff_croft">Jeff Croft</td>
<td headers="jeff_croft affiliation">World Online</td>
<td headers="jeff_croft url">http://jeffcroft.com</td>
</tr>
<tr>
<td id="ian_lloyd">Ian Lloyd</td>
<td headers="ian_lloyd affiliation">Accessify</td>
<td headers="ian_lloyd url">http://accessify.com</td>
</tr>
<tr>
<td id="dan_rubin">Dan Rubin</td>
<td headers="dan_rubin affiliation">Webgraph</td>
<td headers="dan_rubin url">http://superfluousbanter.org/</td>
</tr>
</table>
As this markup is far more complex than using the
scope
attribute, it's always best to use
scope
where possible—and it works great for most cases. Only quite complex tables require
the use of the
headers
attribute.
The thead, tfoot, and tbody Elements
Rows within a table can be optionally grouped in a table head, table foot, and one or more
table body sections, using the
thead
,
tfoot
, and
tbody
elements, respectively. Typically, the
thead
element is used to contain the header rows of the table, the
tbody
element is used to
hold the main content, and the
tfoot
element is used to collect any totals and similar “closing”
information. By including these divisions in your markup, you provide the “hooks” necessary
to create common and often desirable presentational effects, and also allow the user agent to
do logical things, such as including the same header and footer on each page of a printed
version of your table. It is worth remembering that both the
thead
and
tfoot
elements should
appear above any
tbody
elements in your markup. The browser will still display the
tfoot
ele-
ment at the bottom of the table where it belongs.
Our example table doesn't have data appropriate for multiple
tbody
elements or a
tfoot
element, but as it gets a bit more complex, it may. Consider the following:
<table summary="A small table displaying the names,
➥
affiliations, web addresses, and roles of the
➥
authors and editors of Pro CSS Techniques.">
<caption>Pro CSS Techniques authors and editors</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Affiliation</th>
<th scope="col" abbr="URL">Website URL</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody id="authors">
