Tables
Tables
Introduction
Use HTML table elements only for tabular data.
For ambiguous data or when there are multiple columns, thescope
attribute can be included in the<th>
and set torow
orcol
to denote that a header applies to the entire row or column, respectively.
Use a<caption>
element to describe, in text, what the table shows. Some apps and services may auto-generate a summary description of data. You can hide this using CSS if you don't want it visible to sighted users.
The HTML example for a table with header cells in the top row and first column:
<table>
<caption>
Example table with four columns and three rows
</caption>
<tr>
<th>Table</th>
<th scope="col">Column Header A</th>
<th scope="col">Column Header B</th>
<th scope="col">Column Header C</th>
</tr>
<tr>
<th scope="row">Row Header 1</th>
<td>data cell A1</td>
<td>data cell A2</td>
<td>data cell A3</td>
</tr>
<tr>
<th scope="row">Row Header 2</th>
<td>data cell B1</td>
<td>data cell B2</td>
<td>data cell B3</td>
</tr>
</table>Example
| Table | Column Header A | Column Header B | Column Header C |
|---|---|---|---|
| Row Header 1 | data cell A1 | data cell A2 | data cell A3 |
| Row Header 2 | data cell B1 | data cell B2 | data cell B3 |
When it goes wrong
If no table HTML elements were used, then there would be no structure or definition of the table available to assistive technologies.
Even missing table headers in a<table>
means assistive technologies can't associate data cells with the headers. Visual cues aren't enough to make a table inclusive.
Historically, tables were incorrectly used for layouts, which would give assistive technology users a confusing experience. Don't use tables for any layout needs.
Many screen readers will summarise the size of the table when it arrives at one, so our table example would say “Table with 4 columns and 3 rows”.