For complex headers that cannot be identified by their scope alone, or that need to be ordered in
a specific way to make sense, use the
headers attribute to ensure the proper context
is available to users of assistive technologies.
Identify and order the applicable table cell headers using the
This example shows how Example 2 from the Headings Scope
page could be marked up using the
headers attribute to associate the correct
column, row and section headers.
The use of the
headers attribute allows the order of the headings to be
re-ordered to read in an alternative order (e.g., "Gondor female 1950", rather than
the default "1950 Gondor female" when going by scope).
<table> <thead> <tr> <th></th> <th id="y50">1950</th> <th id="y75">1975</th> <th id="y00">2000</th> </tr> </thead> <tbody> <tr> <th colspan="4" id="gdr">Gondor</th> </tr> <tr> <th id="gmale">Male</th> <td headers="gdr gmale y50">1,001,542</td> <td headers="gdr gmale y75">1,583,771</td> <td headers="gdr gmale y00">2,221,945</td> </tr> <tr> <th id="gfem">Female</th> <td headers="gdr gfem y50">1,122,947</td> <td headers="gdr gfem y75">1,782,371</td> <td headers="gdr gfem y00">2,544,187</td> </tr> </tbody> <tbody> <tr> <th colspan="4" id="mdr">Mordor</th> </tr> … </tbody> </table>
headers attribute allows authors to precisely specify the headers, and
their order, to apply to a cell, the need for the attribute is often a signal that a table should
be restructured to simplify its layout. In addition, the attribute makes table markup more
complex to maintain, as all the headers may have to be resynchronized whenever changes are
Consequently, the attribute should only be used sparingly.
headers attribute identifies the cells that contain the header text by their
id attribute value. The order in which the ids are included in the attribute determines
how the headers are announced to the user, so care must be taken to ensure logical playback.
The ordering of the headers does not have to exactly match the markup if another ordering makes more sense (see Example 1).
headers should be considered a last resort when tables absolutely cannot
be restructured to be made simpler. The attribute is not well supported in assistive technologies,
so users may still end up hearing confusing and incomplete headings for each cell.
Note that HTML no longer allows the
td element to be used for headers
td element cannot be referenced from the