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 — Headers at end of row

The following table shows a distance chart with the start destinations defined in the first row and at the end destination at the end of each subsequent row.

In this case, because the header is at the end of the row setting a scope of "row" does not apply it back to the cells already encountered. The headers attribute must be applied to each cell.

Note that a table such as this would be better reconfigured so that the headings are at the beginning of the row so that no additional markup would be needed.

Vancouver Calgary Saskatoon Winnipeg Toronto Montreal St. John's
7323 6334 5838 5010 3141 2602 0 St. John's
4271 3743 3232 2408 539 0 2602 Montreal 
<table>
   <tr>
      <th id="van">Vancouver</th>
      <th id="cal">Calgary</th>
      <th id="sask">Saskatoon</th>
      <th id="win">Winnipeg</th>
      <th id="tor">Toronto</th>
      <th id="mon">Montreal</th>
      <th id="stj">St. John's</th>
      <th></th>
   </tr>
   <tr>
      <td headers="van stj-dest">7323</td>
      <td headers="cal stj-dest">6334</td>
      <td headers="sask stj-dest">5838</td>
      <td headers="win stj-dest">5010</td>
      <td headers="tor stj-dest">3141</td>
      <td headers="mon stj-dest">2602</td>
      <td headers="stj stj-dest">0</td>
      <th id="stj-dest">St. John's</th>
   </tr>
   
   <tr>
      <td headers="van mon-dest">4271</td>
      <td headers="cal mon-dest">3743</td>
      <td headers="sask mon-dest">3232</td>
      <td headers="win mon-dest">2408</td>
      <td headers="tor mon-dest">539</td>
      <td headers="mon mon-dest">0</td>
      <td headers="stj mon-dest">2602</td>
      <th id="mon-dest">Montreal</th>
   </tr>
   …
</table>
Example 2 — Sectioned Table

This example shows how Example 1 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 2).

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