Use the <th> element for table headers
Correct markup is key to making your tables accessible. Mark header cells with <th>
and data cells with <td>
tags. The relationship between the headers and data cells quickly becomes ambiguous in tables with both row and column headers or larger tables with complex data. Define each header's direction by setting the scope attribute to col
or row
for columns and rows, respectively.
Correct markup adds context for every data cell, giving assistive technology users the same obvious information for visual users. As they move through the table, the screen reader announces column headings when moving left and right and rows headings when moving up and down. For example, when a user in the "Event" column moves one cell down, they'll hear "May 14, Classical Music," learning that on May 14, there will be a classical music concert.