Styling Tables - Pro CSS Techniques - page 222

agent understand which cells are related to one another. Again, this is especially helpful to
screen readers and other assistive technology. It helps them read or display tables more logically.
Our example table, with the scope attribute added, might look something like this:
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Affiliation</th>
<th scope="col" abbr="URL">Website URL</th>
</tr>
<tr>
<td scope="row">Jeff Croft</td>
<td>World Online</td>
<td>http://jeffcroft.com</td>
</tr>
<tr>
<td scope="row">Ian Lloyd</td>
<td>Accessify</td>
<td>http://accessify.com</td>
</tr>
<tr>
<td scope="row">Dan Rubin</td>
<td>Webgraph</td>
<td>http://superfluousbanter.org/</td>
</tr>
</table>
Note that the element containing the names of individuals is marked up as a td , not a th ,
but is still assigned the scope attribute. Because our names are data values in this table and
not simply generic labels, they should be table data cell elements rather than table header
elements. However, they still provide context for the rest of the information in the row, so the
addition of the scope attribute is appropriate.
Assigning scope in Complex Tables
As your tables become more complex, you may find cases where the header information for
a particular data cell is not the same row or column as that cell, or where three or more head-
ers apply to a single data cell. In these cases, scope breaks down and you'll need to use the
headers attribute on your cells. By assigning a unique id to your headers, you can then refer-
ence them as the context for a data cell. Our example is simple enough that scope works fine,
but here's an example of how it looks using headers instead:
<table>
<tr>
<th id="name">Name</th>
<th id="affiliation">Affiliation</th>
<th id="url" abbr="URL">Website URL</th>
</tr>
<tr>