colspan & rowspan
The colspan and rowspan attributes make a single table cell span multiple columns or rows, merging grid positions into one cell so headers and values can stretch across the table.
Definition
colspan and rowspan are attributes you place on a table cell — a <th> or a <td> — to make that one cell occupy more than a single position in the grid. colspan stretches the cell horizontally across a number of columns; rowspan stretches it vertically down a number of rows. Both take a positive integer: colspan="2" means the cell is two columns wide, rowspan="3" means it is three rows tall.
They exist because real tables are rarely a perfect uniform grid. A heading may cover two sub-columns; a label may apply to several rows at once; a summary cell may run the full width of the table. Spanning lets one cell fill that merged region instead of forcing you to leave empty cells behind. The rule to remember: a spanning cell *consumes* the positions it covers, so the rows it overlaps must contain that many fewer cells.
Syntax
<td colspan="2">spans two columns</td>
<td rowspan="3">spans three rows</td>Parameters
| Attribute | Effect |
|---|---|
colspan="n" | Makes the cell span n columns horizontally. The other cells in the same row must be reduced by n − 1 so the row still totals the table's column count. |
rowspan="n" | Makes the cell span n rows vertically. Each of the next n − 1 rows must omit the cell in this column, because the spanning cell already fills it. |
Both attributes default to 1 (no span) and accept any positive integer. They may be combined on the same cell to cover a rectangular block — colspan="2" rowspan="2" fills a two-by-two region. The value is capped at the table's remaining columns or rows, so an over-large colspan simply spans to the edge.
Return value
There is no return value; the effect is on the rendered grid. With colspan="n", the browser draws the cell wide enough to cover n column positions, and the border that would have separated those columns inside the cell disappears — the cell reads as one merged block spanning the header or value across the columns. With rowspan="n", the cell is drawn tall enough to cover n row positions, so its content sits alongside n rows of other cells while those rows each drop the cell in that column. The net rule: every row must still account for the full column count, counting each spanning cell once for every column it covers.
- A
colspancell pushes later cells in its row rightward and reduces that row's own cell count by the span minus one. - A
rowspancell occupies the same column in the rows below it, so those rows must omit a cell where the span reaches. - Mis-counting cells is the usual bug: if the numbers do not add up to the column total, the browser renders a ragged, misaligned grid.
Examples
A header cell spanning two columns
Here a single header stretches across two data columns with colspan="2" — visible cells with border CSS make the merge obvious:
A cell spanning three rows
Now a single label runs down three rows with rowspan="3"; notice the following rows omit that first cell because the span already fills it:
Browser & runtime support
colspan and rowspan are original HTML table attributes, supported in every browser with no prefixes or fallbacks needed. They belong on the cell elements (<th> and <td>) only. Unlike the presentational table attributes that CSS replaced, these two are structural — they describe the shape of the grid, not its appearance — so they remain the correct, standards-based way to merge cells and have no CSS equivalent for the table layout model.
Frequently asked questions
What is the difference between colspan and rowspan?
colspan makes a cell span multiple columns horizontally; rowspan makes it span multiple rows vertically. Both take a positive integer and can be combined on one cell to cover a rectangular block.Why is my table misaligned after adding colspan?
colspan="2" counts as two columns, so that row needs one fewer cell; if the counts don't add up the grid renders ragged.