 Standard
9 -- Table Headers.
Markup shall be used to associate data cells and header
cells for data tables that have two or more logical levels of row or column
headers .
Examples:
9.1 --
Table cells are associated with the appropriate headers (e.g. id, headers, scope
and/or axis HTML attributes).
Standard 9 -- Table Headers. See also: Standard 8 -- Tables.
| Do |
Don't |
Consider using ID to associate each cell of a data
table with its header. | Create a sub-table (table within a table) without
associating each cell with its appropriate header. |
Why: Unlike using the "scope" attribute,
using the "id" and "headers" attributes requires
that every data cell in a table include special attributes for association.
It can be useful when tables include sub-tables or subsets of data, as
it helps insure each cell is associated with the appropriate descriptive
header. How: Define the header using the "id" attribute
in the <th> element. Then specify the correct header using the "headers" attribute
in the <td> element of each data cell. Sample HTML table code: <table>
<tr>
<th> </th>
<th colspan="2" id="winter" >Winter</th>
<th colspan="2" id="summer" >Summer</th>
</tr>
<tr>
<th> </th>
<th id="am1" >Morning</th>
<th id="pm1" >Afternoon</th>
<th id="am2" >Morning</th>
<th id="pm2" >Afternoon</th>
</tr>
<tr>
<td id="wilma" >Wilma</td>
<td headers="wilma am1 winter" >9-11</td>
<td headers="wilma pm1 winter" >12-6</td>
<td headers="wilma am2 summer" >7-11</td>
<td headers="wilma pm2 summer" >12-3</td>
</tr>
<tr>
<td id="fred" >Fred</td>
<td headers="fred am1 winter" >10-11</td>
<td headers="fred pm1 winter" >12-6</td>
<td headers="fred am2 summer" >9-11</td>
<td headers="fred pm2 summer" >12-5</td>
</tr>
</table> End code. This table would be displayed as follows:
| |
Winter |
Summer |
| |
Morning |
Afternoon |
Morning |
Afternoon |
| Wilma |
9-11 |
12-6 |
7-11 |
12-3 |
| Fred |
10-11 |
12-6 |
9-11 |
12-5 |
Get more help with data tables, visit
WebAIM's "Creating Accessible Tables."
 Previous
Next
Top
of Page || Return to Index
View/print
in PDF format. (Acrobat
Reader required.)
|
