The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Accessible HTML tables start with correctly marked headers—not visual styling. Use <th> for cells that label rows or columns, <td> for data, and explicit header associations when a table’s structure genuinely needs them. Then add a concise caption and check that the relationships remain clear when navigating the table cell by cell.
1. Confirm that a table is the right structure
Use a data table when information has meaningful relationships across rows and columns. Do not use a table simply to position page elements; use CSS for visual layout. Text arranged with tabs or spacing may look tabular, but its row-and-column relationships can be lost when the presentation changes. See the W3C WAI Tables Tutorial.
2. Mark headers and data cells correctly
Use <th> for cells that identify a row or column, and <td> for ordinary data cells. Bold text, color, or borders alone do not give assistive technology the structural information conveyed by these elements. W3C WAI puts it plainly: “Header cells must be marked up with <th>, and data cells with <td> to make tables accessible.”
For a simple table with column and row headers, add scope="col" or scope="row" to show which direction each header covers:
<table>
<caption>Delivery slots</caption>
<thead>
<tr>
<th scope="col">Time</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">09:00–11:00</th>
<td>Closed</td>
<td>Open</td>
</tr>
</tbody>
</table>This makes the day names column headers and the time slot a row header. Guidance on row and column scope is available in the W3C WAI tutorial for tables with one header and its tutorial for tables with two headers.
3. Match the association method to the table’s complexity
Keep the markup as simple as the relationships allow. For grouped or multi-level headers, make the group structure explicit; use IDs and headers only when simpler row or column relationships are not enough.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Table structure | Markup approach | What to check |
|---|---|---|
| One obvious header row or column | <th> and <td> |
Confirm that each data cell’s relationship to its header is unambiguous. |
| Both row and column headers | <th scope="col"> and <th scope="row"> |
State the direction of each header. |
| Headers spanning column or row groups | Define the groups in the table structure and use scope="colgroup" or scope="rowgroup" where appropriate. |
Make the group structure as well as the header range clear. |
| Several headers apply to a data cell, or headers change within the table | Give each relevant header a unique id; list the associated IDs in the data cell’s headers attribute. |
Check each cell’s associations, and consider whether separate tables would be clearer. |
The W3C WAI tutorial for irregular tables describes grouped headers and explicit associations. It identifies repeated or changing column headers and data cells associated with three or more headers as cases where multi-level associations may be appropriate. Do not add that complexity preemptively to a table whose relationships are already clear.
4. Give the table a name and, when needed, orientation
Add a concise <caption> naming the table’s subject. It helps readers identify the table and decide whether to explore it. If the structure is unusual, provide a short nearby description of how its information is organized—for example, which categories appear in rows and which measures appear in columns. The description should orient readers rather than repeat the caption. W3C WAI discusses captions and table summaries in its caption and summary guidance.
5. Check the rendered table and its meaning
Review the table in its rendered form and navigate it cell by cell. Confirm that each data cell is associated with the right header or headers, the caption identifies the subject, and the organization makes sense without relying on visual styling alone.
An automated accessibility checker can help surface possible issues, but it cannot establish that a table’s meaning is clear. The UK Department for Education’s axe DevTools instructions advise verifying findings to avoid both false positives and false assurances. Treat automated results as prompts for review, not as a substitute for it.
W3C’s H51 is one documented technique related to WCAG 2.2 Success Criterion 1.3.1, not the only way to meet that criterion. The aim is to ensure that information and relationships conveyed through presentation can also be determined programmatically or are available in text; the specific markup should fit the table. See W3C’s H51 technique.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
