HTML Tables

Build accessible tables for genuinely tabular data.

Tables express relationships between data across rows and columns. They are excellent for schedules, comparisons, measurements, and reports—and inappropriate for page layout. Accessible tables identify their purpose and connect every data cell to the headers that explain it.

Build a clear table structure

caption names the table, thead groups column headers, tbody contains the primary records, and tfoot can summarize them. th marks header cells and td marks data cells. scope=row or scope=col explicitly states what a simple header applies to.

<table>
  <caption>Workshop schedule</caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Day</th>
      <th scope="col">Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Semantic HTML</th>
      <td>Monday</td>
      <td>90 minutes</td>
    </tr>
  </tbody>
</table>

• Write a concise caption.
• Use th for genuine headers.
• Add scope for simple row and column relationships.
• Keep source order aligned with visual order.
• Make wide tables scroll without clipping content.

Handle spanning and responsive tables carefully

colspan and rowspan can represent grouped data, but they also make header relationships more complex. Prefer a simpler table when possible. On narrow screens, place the table in a labeled horizontal-scroll region instead of shrinking text until it is unreadable.