Summary

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.

Techniques

Examples

Example 1 — Sectioned Table

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).

1950 1975 2000
Gondor
Male 1,001,542 1,583,771 2,221,945
Female 1,122,947 1,782,371 2,544,187
Mordor
<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>

Explanation

Caution

Although the 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 made.

Consequently, the attribute should only be used sparingly.

The 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).

Using the 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

Note that HTML no longer allows the td element to be used for headers (i.e., a td element cannot be referenced from the headers attribute).

Related Links