<?xml version="1.0" encoding="utf-8"?>

Use the <th> element for table headers

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.

Improve your UX & Product skills with interactive courses that actually work