Styling Tables - Pro CSS Techniques - page 221

The th Element
The th element is used to hold header information. Like td , th defines a table cell, but it indi-
cates a special cell that is the header of a row or column (typically across the top or down the
left of a table—but not necessarily). In our table, the first row, consisting of “Name, “Affilia-
tion,” and “Website URL,” contains headers. As such, these should all be marked up with th
elements, like so:
<tr>
<th>Name</th>
<th>Affiliation</th>
<th>Website URL</th>
</tr>
<tr>
<td>Jeff Croft</td>
<td>World Online</td>
<td>http://jeffcroft.com</td>
</tr>
Most browsers, by default, will display th elements in bold and centered in the table cell—
but keep in mind you'll be able to style them however you like using CSS.
th is a key element for both usability and accessibility. A visual indication of a particular
row or column in the header makes tables much easier to scan and parse quickly, and the
element also allows assistive technology such as screen readers to handle the data differently
than other data cells. For example, some screen readers may read a row in this table as follows:
“Name: Jeff Croft, Affiliation: World Online, Website URL: http://jeffcroft.com.” Bear this in
mind when designing your tables.
The abbr Attribute
The abbr attribute is a great addition to table cells (whether they are td or th elements). It
allows you to provide an alternate (usually shorter) description for the data in the cell. Render-
ing devices, especially screen readers and other assistive technology, use these abbreviated
versions to enhance usability of the table. In our example table, we may wish to provide a short-
ened version of one of our headers:
<tr>
<td>Name</th>
<td>Affiliation</th>
<td abbr="URL">Website URL</th>
</tr>
Now, when a screen reader reads a row, it might say, “Name: Jeff Croft, Affiliation: World
Online, URL: http://jeffcroft.com.”
The scope Attribute
The scope attribute associates a particular header with the appropriate data cells. It can be
added to either th or td elements (although it's most commonly used on th ), and expects one
of four possible values: col , row , colgroup , or rowgroup . Adding this attribute helps the user