How do you build an accessible HTML table?

A table is a relationship between rows, columns and headers. When the markup preserves that relationship, a screen reader can announce the correct header as a user moves between cells.

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>120</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

What makes a table accessible

• Use a caption to name the table and explain what it contains
• Use th for headers and td for data cells
• Set scope=col or scope=row so headers map to the right cells
• Keep the header structure consistent; avoid merged cells that break the mapping
• Never use tables for page layout

Complex tables with multiple header levels are possible, but they quickly become hard to navigate. If the data is very complex, consider splitting it into smaller tables or providing a summary.