Presenting tabular information.
WHEN TO USE A TABLE
When data has rows and columns with a genuine relationship.
WHEN NOT TO
For layout. Ever.
WHY NOT
It conveys a false relationship to assistive technology, and it does not adapt to narrow screens.
WHAT A PROPER TABLE INCLUDES
A caption describing it Header cells, marked as headers A defined header row or column Row and data cells
WHY HEADERS MUST BE MARKED
So a screen reader announces the relevant header when reading each cell.
WHAT THAT MEANS FOR THE USER
They know which column a value belongs to, without seeing the layout.
WHAT TO SPECIFY
Whether each header applies to a row or a column.
WHAT TO AVOID
Merged cells, where avoidable Tables nested inside tables Tables with no headers
WHAT TO DO ON NARROW SCREENS
Allow the table to scroll within its own container, or present rows as stacked blocks.
WHY SCROLL WITHIN A CONTAINER
So the page itself does not scroll sideways.
WHAT TO CHECK
That the table is understandable when read cell by cell.
