Start by making the table’s header relationships explicit in HTML: use <th> for cells that label rows or columns, <td> for data, and scope to clarify header direction when needed. Then add a concise caption, use explicit ID-based associations only for genuinely complex headers, and check that the table still makes sense when navigated cell by cell.
Confirm that a table is the right structure
Use an HTML 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 instead. If data is arranged with tabs or visual spacing rather than table markup, its row-and-column relationships may not survive changes in presentation.
As an Amazon Associate I earn from qualifying purchases.
Accessible presentation depends on structure, not just appearance. Bold text, color, or borders can make a cell look like a heading, but they do not by themselves identify it as one to assistive technology. W3C WAI puts the core requirement plainly: “Header cells must be marked up with <th>, and data cells with <td> to make tables accessible.” See the W3C WAI Tables Tutorial.
Mark up headers and state their direction
Use <th> for cells that label a row or column and <td> for ordinary data. In a simple table with both row and column headers, add scope="col" to column headers and scope="row" to row headers. The scope attribute tells browsers and assistive technology which cells a header describes.
<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 table declares the days as column headers and each time slot as a row header. For basic scope guidance, see W3C WAI’s guidance on irregular tables.
Match the markup to the table’s complexity
Keep associations as simple as the structure allows. Add group markup and explicit header links only when the table’s relationships call for them.
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 do |
|---|---|---|
| One obvious header row or column | <th> and <td> |
Keep the structure simple and confirm that the relationship is unambiguous. |
| Both row and column headers | <th scope="col"> and <th scope="row"> |
State each header’s direction. |
| Headers span groups of rows or columns | Group markup with scope="colgroup" or scope="rowgroup" |
Define the group structure as well as the range covered by each header. |
| Several headers map to a data cell, or headers change within the table | Unique header id values and a headers list on relevant data cells |
Make each association explicit, and consider splitting the table if that would clarify it. |
Use group scope for grouped headers
When headers span a group of columns or rows, define the group in the table structure and use the corresponding scope value, such as colgroup or rowgroup. The markup should describe the actual structure rather than relying on visual placement to imply which cells belong together.
Recommended Free Tools
Use IDs and headers only when simpler scope is not enough
For a genuinely multi-level header structure, give each header a unique id, then list the relevant IDs in the headers attribute of each data cell. This is useful when a cell is associated with several headers that cannot be expressed as a straightforward horizontal or vertical relationship. W3C WAI identifies tables with repeated or changing column headers and cases where three or more headers apply to a data cell as examples where these explicit associations may be appropriate. Its guidance also recommends considering whether the content can be split into smaller tables: W3C WAI guidance on multi-level headers.
Give readers a way to identify and orient themselves
Place a concise <caption> inside the table to name its subject. A clear caption helps readers identify the table and decide whether to explore it. For an unusual structure, add a short nearby description explaining how its rows and columns are organized; make that description useful orientation, not a repetition of the caption. W3C WAI discusses captions and table descriptions in its guidance on captions and summaries.
Check the table in context
Review whether each data cell has the correct associated header or headers, whether the caption identifies the table, and whether the relationships remain understandable when moving through cells. Automated tools can help identify potential issues, but they cannot establish that a table’s meaning is clear to a person.
axe DevTools is one option for automated accessibility checks. The UK Department for Education’s axe DevTools instructions advise verifying findings to avoid both false positives and false assurances. Treat tool output as a prompt for review, not a substitute for checking the table’s structure and meaning yourself.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Keep WCAG techniques in perspective
W3C’s H51 is a documented technique related to WCAG 2.2 Success Criterion 1.3.1, but W3C describes techniques as examples rather than required implementations. The practical goal is to ensure information and relationships conveyed by the table can also be determined from its structure; H51 is not the only way to meet that outcome. 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.
