Headers and ID: Advanced Table Design

When scope attributes are inadequate for a complex table's structure, use id and headers to explicitly associate data cells with their corresponding header cells.

The following table demonstrates this approach:

This technique involves creating explicit associations between cells. The process requires two main steps:

1. Assign Unique IDs: Every header cell (<th>) that will be referenced must be given a unique id attribute.
2. Reference the IDs: On every data cell (<td>), and on any header cell acting as a sub-header, add a headers attribute. The value of this attribute is a space-separated list of the ids of all header cells that apply to it.

The following example demonstrates how the ids are assigned to headers and then referenced in the headers attributes of the data cells.

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

By using this method, you provide an unambiguous path for assistive technology. For example, a screen reader user navigating to the cell containing "Comics: More than Words" will hear its full context announced, derived from the headers attribute: "Language Requirement, Name, ENG 1C: Comics: More than Words."

This ensures users can understand complex data relationships regardless of table layout.

Important: Do Not Mix Techniques
The scope attribute must not be used in a table that uses the id and headers technique. The two methods for creating associations are mutually exclusive within a single table. Choose one method and apply it consistently.