Accessible Tables

Data tables need <caption>, <th scope>, and <thead>/<tbody> so screen readers can navigate column/row relationships.

Example

<table>
  <caption>Q1 2024 Sales by Region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Sales</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$12,400</td>
      <td>+8%</td>
    </tr>
  </tbody>
</table>

HTML

Full Editor

Pro Tip

Use scope="col" on column headers and scope="row" on row headers.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned