Tables for data

Proper table structure

Use <thead>, <tbody>, <th>, <td> correctly. Include <caption> or aria-label. Headers help screen readers map cells.

<table>
  <caption>Q1 Sales by Region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$50K</td>
      <td>12%</td>
    </tr>
  </tbody>
</table>

The scope attribute

Use scope="col" for column headers, scope="row" for row headers. This helps screen readers map data cells to their headers.

Complex tables

For complex tables, consider a data description above the table or providing data in alternative format (downloadable CSV).