Spanning & Accessible Tables

colspan and rowspan are attributes on <td> and <th> that extend a cell across multiple column or row slots. colspan="3" means: this cell occupies three consecutive columns. rowspan="2" means: this cell continues down into the next row as well. The number is the count of slots consumed, including the cell's own home slot.

For header cells that span columns, scope="colgroup" declares that the header covers an entire <colgroup> of columns. For header cells that span rows, scope="rowgroup" covers an entire row group. When a table is complex enough that scope cannot unambiguously match a header to its data cells, the headers attribute on each <td> provides the link explicitly: it holds a space-separated list of id values from the relevant <th> elements.

Real-world tabular data often has grouped structure: a conference with rooms that share a keynote slot, a product catalogue with variants that share a name, a timetable with days that span multiple time blocks. colspan and rowspan let the HTML table reflect that structure rather than flatten it into duplicated or empty cells. A visually merged cell that is not actually merged in the markup misleads assistive technology about the table's shape.

The headers attribute is the escape hatch for complex spanning. When a <td> sits under a column-spanning <th>, screen readers cannot always infer the association from scope alone, especially in multi-level header situations. Setting headers="q1 revenue" on each data cell (where q1 and revenue are ids of the relevant header cells) creates an unambiguous, auditable link that survives any layout complexity.

Add colspan or rowspan to the cell that should expand, then remove the displaced cells from the affected rows or columns. If you colspan="2" a cell, the cell that would have been in the next column of that row must not exist in the markup. If you rowspan="2" a cell in the first row, the second row has one fewer <td> than the other rows. Getting the cell count wrong causes the layout to misalign.

For a header that spans two columns and needs to associate with data below, give the <th> an id, then add a headers attribute to each data cell in those columns. For a straightforward column header, scope="col" is enough. Use headers when you have: grouped column headers above individual column headers, or a row header that labels only a subset of cells in that row.

The <colgroup> and <col> elements give you a hook for styling entire columns in CSS without touching every cell. A <col> inside <colgroup> targets the column at its index position. A <th> that precedes a <colgroup> with scope="colgroup" declares itself the header for every column in that group.