HTML and XHTML
This technique relates to:
The objective of this technique is to associate each data cell (in a data table) with
the appropriate headers. This technique adds a headers
attribute to each
data cell (td
element). It also adds an id
attribute to any
cell used as a header for other cells. The headers
attribute of a cell
contains a list of the id
attributes of the associated header cells. If
there is more than one id
, they are separated by spaces.
This technique is used when data cells are associated with more than one row and/or one
column header. This allows screen readers to speak the headers associated with each data
cell when the relationships are too complex to be identified using the th
element alone or the th
element with the scope
attribute.
Using this technique also makes these complex relationships perceivable when the
presentation format changes.
This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.
Example Code:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 header information with data cells
Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If “no," the table is a layout table. If “yes," the table is a data table.
For data tables, check that any cell that is associated with more than one row
and/or one column header contains a headers
attribute that lists the
id
for all headers associated with that cell.
For data tables where any cell contains an id
or
headers
attribute,
Check that each id
listed in the headers
attribute
of the data cell matches the id
attribute of a cell that is used
as a header element
Check that the headers
attribute of a data cell contains the
id
attribute of all headers associated with the data cell
Check that all ids are unique (that is, no two elements in the page have the same id)
If table is a layout table, no cells contain headers
or
id
attributes
If table is a data table and any cell contains an id
attribute,
checks #3.1, #3.2, and #3.3 are true.
If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.