When to use a real table
Genuine tabular data, where rows and columns carry meaning together, deserves a real table element rather than a grid of styled boxes. A real table lets screen readers announce which row and column a cell belongs to, so users keep their bearings while moving through data.
- Use a table for data, not for page layout.
- Header cells label their row or column.
- The caption names what the whole table contains.
Associating headers
The link between a cell and its headers is what makes the data understandable when read aloud.
- Mark column and row headers as header cells, not plain cells.
- Set a scope so each header clearly applies to its column or its row.
- For complex layouts, connect cells to headers explicitly.
Captions and structure
- Provide a caption so users know the tables subject before exploring it.
- Keep one logical header row so reading order stays predictable.
- Avoid merged cells that scramble the row and column relationships.
Why semantics beat styling
A pile of styled boxes may look like a table but announces nothing about structure. Screen reader users then hear a stream of values with no sense of which column or row they belong to, making the data meaningless.
Key idea
Real table semantics with header cells, scopes, and a caption let screen readers connect every value to its row and column, which styled boxes cannot do.