Headers and ID: Advanced Table Design

Once a table becomes more complicated than simple headers or groups, then almost any structure can be accessibly built using HEADERS and ID values. Take for example, the following table:

To create this structure, each TH element gets a unique ID value and then every cell (both TD and TH elements) get a HEADERS attribute that reference those ID values (which can be more than one, separated by a space). As long as you have correctly identified each element, you can create almost any structure this way. So the first part of the table above would look like this:

<table>
   <caption>Courses</caption>
   <thead>
      <tr>
         <th id="course">Course</th>
         <th id="name">Name</th>
         <th id="credits">Credits</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th colspan="3" id="language">Language Requirement</th>
      </tr>
      <tr>
         <th id="eng1c" headers="language course">ENG 1C</th>
         <td headers="language name eng1c">Comics: More than Words</td>
         <td headers="language credits eng1c">1</td>
      </tr>
      <!-- Additional Rows Here -->
   </tbody>
</table>

So if you look a the THEAD, each TH has an ID attribute with unique value. The same thing happens with the first TH ("Language Requirements") in the TBODY. Then with the ENG 1C row, there is first a TH with an ID value, but as this is also under a TH in the THEAD section, it also has a HEADERS attribute with that value. Then each of the TD elements has headers that point to the three TH elements that define that cell.

So, to a screen reader user, the cell with the content "Comics: More than Words" will have headers of "Language Requirement", "Name", and "ENG 1C" because those three headers are references in the HEADERS attribute.

Note too that the SCOPE attribute has been removed as you can't mix and match using the SCOPE and HEADERS techniques for creating structure.