colspan: one cell across several columns
colspan="n" makes a cell as wide as n columns. The row it is in then has n - 1 fewer cells. Here the total spans the first two columns:
The last row has two cells, but the first counts as two, so the row still adds up to three columns like the others.
rowspan: one cell down several rows
rowspan="n" makes a cell as tall as n rows. The rows below it leave that column out, because the tall cell already fills it:
The rows for Bob and Cy have only one <td>: the Team column is already taken by "Design". Nothing marks that in the HTML, so read a rowspan table top to bottom and keep a count of which columns are still covered.
colspan and rowspan together: a timetable
One cell can span both ways. A timetable is the classic case, with some classes lasting two slots and some running across two days:
Count the 10:00 row: the time header, then Mon is covered by HTML from the row above, then Lab fills Tue and Wed. At 11:00, Mon is free again and Lab still covers Tue and Wed, so the row has one data cell.
Counting cells so the table stays square
Every row must add up to the same number of columns, counting each cell's colspan and the columns covered by rowspan cells from above. When a row has one cell too many, the browser adds a new column for it and the table gets a jagged edge:
In the wrong table, the second row forgot that A covers its first column, so D lands in a third column that no other row has. The fix is to delete one cell. The same mistake with colspan is keeping all the original cells in the row that has the wide cell.
A cell that is too few is the opposite problem: the row ends early and leaves a hole at its end.
Grouped headers with colspan
A header can span the columns it labels, above a row of more specific headers. Mark it scope="colgroup" so screen readers apply it to all the columns under it:
"City" spans both header rows with rowspan="2", and each month spans its two columns with colspan="2". The <colgroup> elements define the column groups that scope="colgroup" refers to. A screen reader on the Rome 31 cell can then say "Rome, July, High, 31". For the rest of the table structure, see HTML table.
Keep spans for real structure
Spans make a table harder to read with a screen reader and harder to sort, filter or copy into a spreadsheet. Use them where the data really is grouped (a total, a header over sub-columns, a class that lasts two hours). If a table needs many spans, two simpler tables are often clearer.
Common mistakes
- Leaving the covered cells in. A
colspan="2"cell replaces two cells; delete one of the originals. - Forgetting the rows below a
rowspan. Each of them needs one cell fewer. - Writing
colspanon<tr>. It only works on<td>and<th>. - Spans for visual layout, such as a banner row across a page layout table. Use CSS grid for layout.
colspan="100%"to mean "the full width". The browser reads only the leading digits, so this cell spans 100 columns and adds empty columns to the table. The value is a whole number of columns.
Frequently Asked Questions
What does colspan do in HTML?
colspan makes a <td> or <th> stretch across several columns: <td colspan="3"> takes the place of three cells in its row. That row then needs two fewer cells than the others.
What does rowspan do in HTML?
rowspan makes a cell stretch down across several rows: <td rowspan="2"> fills its own row and the one below. The next row must leave that column out, because the cell above already covers it.
Can a cell use colspan and rowspan together?
Yes. <td colspan="2" rowspan="2"> covers a block of two columns by two rows. Every row it passes through needs two fewer cells of its own.
Why does my table have an extra cell sticking out?
A row has more cells than the others once spans are counted. Usually a row below a rowspan still lists a cell for the covered column, or a row with a colspan kept all its original cells. Remove the extra <td>.
What is the maximum value of colspan?
Browsers cap colspan at 1000 and rowspan at 65534. For colspan, a value of 0 or one that does not start with a digit is treated as 1.
