---
title: "Table header is not associated to any data cells"
date: "2024-10-25T04:11:26+00:00"
summary: "Why it is important to ensure that your table headers are properly associated with data cells for improved accessibility and user experience."
image:
type: "page"
url: "/web-governance/table-header-not-associated-any-data-cells-0"
id: "5bc70857-ec97-4900-9898-625c4556ffb6"
---
Table of contents will be added
1.3.1 Info and Relationships
This document gives information about the related Web Governance checks:
* Table header is not associated to any data cells.
What
----
Table headers should have associated cells for which they serve as headers.
Why
---
When table headers are properly associated with the data they describe, assistive technologies like screen readers can accurately present the table's structure and content to all users, including those with visual impairments. This helps users understand the relationships between the data points, which makes the information more accessible and easier to navigate.
Without this connection, the content in a table can become confusing or meaningless for those who rely on such technologies, which leads to a poor user experience.
Who
---
### Affected users
This check affects the following users who have:
* **Visual impairments;** who access the site contents with a screen reader or screen magnification software.
### User story
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
_“You know, my little girl, she's only five, and we had to take her in for a blood test. The doctors were worried she might have diabetes, just like my dad did. I was really anxious about it, of course, as any mom would be._
_So, when the results came in, I had to check them myself using my computer. Now, with my screen reader, it's always a bit tricky. The results were all in this table format, and let me tell you, it wasn't easy to make sense of it. The screen reader just starts reading everything out of order. So instead of getting a clear table reading, I’m hearing things like "glucose level, 102," then right after, 140, cholesterol, then something like "A1C, 5.6" followed by 150, and 6.2 without any clear connection between what these numbers mean in relation to each other._
_It’s like trying to sort through a jumble of information that just doesn't fit together. I had to go over it several times, piecing things together, and even then, I wasn’t sure if I was understanding it all correctly. It’s frustrating because, as a mom, you want to know what’s going on with your child right away, but sometimes, technology just doesn’t make it easy. Eventually, I had to call the doctor’s office to get them to explain the results to me directly, just to make sure I wasn’t missing anything important.”_
Examples
--------
This section provides some examples of the issue.
### Example: A table with correctly associated headers
Each of the two `| ` elements are correctly associated with an implicitly assigned ` | ` element because this ` | ` element spans two columns.
[](https://downloads.intercomcdn.com/i/o/1190770905/8565c30eecbc9f84f5bc5c84/AD_4nXcDwvXDstTz3Gc0Jbb8_9z8G0x1KNPMiFARhzP-tNS-ux12mF_HFjdOwUic7_5frHb62MJ1uoA_tLLEX-V3YSgszcVqK3j0jjYz2QfXE2iBb6sLLG5oe_kckS9pt6Lx2sRo-AiTgWIlNqs0a7ZJdToWrdy3QsCar8BIymgQmXUke_KJpvSJeQ?expires=1729965600&signature=22ecd56d7e16e0f6fefdd21396edbfb0015fc58724517a165fe4f9b9e778ff56&req=dSEuFs55nYhfXPMW3nq%2BgbvbXbe9gG5gq9HHOruvWQ780VwgItjcRhd%2Bd0km%0ApCp2SeFGscaGNj1R6z40TZJfreA%3D%0A)
### Example: A table without correctly associated headers
This ` | ` element with `id` equal to `col2` does not have an assigned cell within the same table element because the headers attribute removes the cell association from its column.
| Country |
Starting with a Z |
| Zambia |
Zimbabwe |
[](https://downloads.intercomcdn.com/i/o/1190771897/2e3c284d4e6f5e37329c501b/AD_4nXfaij-6y1jmWl-bFu4vh-eTiGHsEJIv8mzQJGREPCnF8JtMDIJ6SGFGxhXiBPYZVRBqG4adHgwHZb2pexXZEjtT4mWvHi5vQNjihC6-gMXHJPd2GMV7uazvTnbORygmKm5gLMqQIRAwVB0wAMgQsxnu6gYAl6rmokYf0E5DeLP_dv1_Tv_FCXo?expires=1729965600&signature=b666bfa99c9b439b563f9eaf831753f59d5d50b69b4d92c0614c69718268aafe&req=dSEuFs55nIlWXvMW3nq%2BgS46Kqt3VPDNN%2BE73NEl%2Fl1vmaZ1CcTgI%2BfeYTMa%0A0YUNvm7qmWUTydqYfBjNftrdv38%3D%0A)
How
---
This section provides information on how to find and fix the issue.
### How to find it
The Web Governance platform highlights cases where table headers are not linked to any data cells. Table headers can be HTML ` | ` elements or other elements with an ARIA role of `columnheader` or `rowheader`.
### How to fix it
To fix the issue, adjust your HTML code to create a relationship between the header cell that triggered the error and the cell it is meant to describe.
This relationship between header cells and other cells can be made either implicitly through the table’s structure or explicitly using the `headers` attribute.
For more information, refer to the “ACT Rules” section below, which provides a link to a full technical explanation of this check and offers detailed examples on how to pass it.
Additional Resources
--------------------
### WCAG Success Criteria
[1.3.1 Info and Relationship](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
### ACT Rules
Related accessibility conformance testing rules:
[Table header cell has assigned cells](https://www.w3.org/WAI/standards-guidelines/act/rules/d0f69e/proposed/)
### Other Resources
[Forming relations between data cells and header cells](https://html.spec.whatwg.org/multipage/tables.html#header-and-data-cell-semantics). |