This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.
Changes are displayed as follows:
HTML 4.01 and XHTML 1.x
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.
<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.