Text

Table

Published on

Description

Tables present tabular data in rows and columns. Use semantic HTML table elements with proper header associations. It is absolutely fine to use tables for tabular data.

Example

Open in new tab
View HTML markup 
  <div class="table-overflow" role="region" aria-label="Data table" tabindex="0">
  <table>
    <caption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</caption>
    <colgroup>
      <col />
      <col span="2" />
      <col span="3" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>

Accessibility

  • Use scope="col" on column headers and scope="row" on row headers for proper screen reader cell-to-header association.
  • Include <caption> or aria-labelledby for table identification.
  • Wrap tables in a scrollable container with role="region", aria-labelledby (or aria-label), and tabindex="0" for keyboard-accessible scrolling.
  • Do not use CSS display properties (flex, grid, block) on table elements — they strip table semantics. Use position: sticky for fixed headers instead.
  • Do not convert tables to ARIA grids unless building a spreadsheet-like interface with 2D arrow-key navigation.
  • Avoid spanning headers — they cause inconsistent screen reader announcements across all tested assistive technologies.

References

Variables

None