Skip to main content

Tables

Accessible tables and media ensure that all users, including those using assistive technologies, can understand, navigate, and operate your content. For tables, use semantic structure to expose relationships between headers and data. For media, always provide user controls and alternatives like captions or transcripts.

Examples​

✅ Correct

<table>
  <caption>Quarterly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Product A</th>
      <th scope="col">Product B</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>120</td>
      <td>90</td>
      <td>210</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td>150</td>
      <td>110</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

❌ Incorrect

<table border="1">
  <tr>
    <td colspan="4">Quarterly Sales Report</td>
  </tr>
  <tr style="background: green;">
    <td>Q1</td>
    <td>120</td>
    <td>90</td>
    <td>210</td>
  </tr>
  <tr style="background: red;">
    <td>Q2</td>
    <td>150</td>
    <td>110</td>
    <td>260</td>
  </tr>
</table>

👍 Do's​

  • Use <table> only for tabular data, never for layout.
  • Mark header cells with <th> and use scope (e.g., col, row, colgroup, rowgroup) or headers/id for complex tables.
  • Make tables responsive without breaking semantics; consider stacked views with ARIA labels.

👎 Don'ts​

  • Use tables for page layout or grid structures.
  • Fail to mark header cells as <th> or omit scope.
  • Omit captions (loss of context) or merge cells without defining relationships.
  • Use color alone to communicate status/meaning.
  • Use autoplay with sound for audio/video.
  • Provide media without controls.
  • Publish media without captions or a transcript.

Extras​

  • Multi-level/complex tables:
    • Use scope where possible; otherwise use id on headers and headers on data cells for explicit associations.
  • Responsiveness:
    • Don’t break semantics; reposition visually with CSS while preserving <th>/<td> relationships. Use ARIA labels for stacked views.

Links/Sources/Plugins/Tools​