Complex Tables: headers and id Pairing

Some tables span cells or stack multiple header levels. Simple scope cannot describe a cell governed by two or three headers at once.

A header that uses colspan to cover several columns confuses the simple model. The browser can no longer guess which cells it owns.

For complex tables, give each th an id and point each td to its headers by id. This wires cells to headers explicitly, no guessing.

A data cell can name several headers in its headers attribute, separated by spaces. The reader announces them all in the order you list.

Give the row header and column header each an id, then reference both from the cell. Now the value is fully described across both axes.

For grouped headers, scope can be colgroup or rowgroup. Use these when one header spans a band of columns or rows above the detail headers.

A year header over month headers needs both levels described. With id and headers each cell can reference the year and the month together.

Every id on the page must be unique. Duplicate header ids silently break the pairing, so a quick validator pass saves real pain later.

List ids in the order you want them read, usually the broadest header first. The screen reader follows your order exactly when it announces.

Before reaching for id and headers, ask if you can split one giant table into smaller simple ones. A simpler structure is almost always more accessible.

The id and headers technique is powerful but easy to mistype. Always confirm a few cells read correctly with a real screen reader, not just by eye.

A data cell is governed by both a row header and a spanned column header.

When spans or stacked levels defeat scope, give headers an id and reference them from each cell with headers. Keep ids unique and verify by ear.