Table Spans
Today we merge table cells: colspan stretches a cell across columns, and rowspan stretches a cell down rows.
- 1
What cell spans are
Last lesson every cell sat in one row and one column. Today one cell can stretch wider or taller — like merging cells in a spreadsheet.
colspantells a cell how many columns it covers.rowspantells a cell how many rows it covers. Both are attributes on<th>or<td>. - 2
The Shared Category Problem: Eliminating Repetitive Cells
A timetable often needs a title across the top, or one day label shared by two class rows. Writing the same “Mon” twice is messy. People needed a way to let one cell own more than one slot in the grid.
So HTML added
colspanfor sideways stretch androwspanfor downward stretch. When a cell spans rows, the later row must leave that column empty — you do not write a second cell in the same place. - 3
How Browsers Calculate Grid Offsets and Span Coordinates
The browser still builds a grid. A cell with
colspan="2"occupies two column slots. A cell withrowspan="2"occupies two row slots. Count carefully so the total slots per row still line up.In the example below, “Timetable” spans both columns. “Mon” spans two class rows. The second data row only needs the Class cell, because Day is already covered.
- 4
Hands-On: Building a Multi-Hour Weekly Timetable
Read the small timetable below, then look at the browser pane. Watch how the title and the day label stretch.
- 5
The Golden Rule: Respect the Coordinate Matrix (Never Over-Count)
If the top row has two columns, a title with
colspan="2"fills that whole row. After arowspan, skip the covered cell in the next row. Wrong counts leave a broken or uneven table.
Merges adjacent cells within the SAME row. Reduces the number of <td> tags written in that specific <tr>.
Merges downward across SUBSEQUENT rows. In the NEXT <tr>, you must omit that column's cell to prevent table blowout.
What you'll learn
- 1Some cells need more than one slot
- 2colspan stretches across columns
- 3rowspan stretches down rows
- 4Later rows skip covered cells
- 5Keep the column count consistent
Line by line
<th colspan="2">Timetable</th>One header cell that covers two columns. That is the title across the top of the grid.
<td rowspan="2">Mon</td>One data cell that covers two rows. Both class lines share the same day label.
<td>Science</td>The next row only needs the Class cell. Day is already filled by the rowspan above.
Try it yourself
Build a two-column table. Put a title with colspan="2" on the first row. Then use rowspan="2" on a day name with two subjects under it.
Hint: After rowspan, the next row should have one fewer cell in that column.
Common mistakes
- 1.Still writing a cell in the next row where
rowspanalready covers that slot. The grid then looks uneven. - 2.Setting
colspanlarger than the number of columns in the table. Count first, then span.
Interview prep
Q: What does colspan do?↓
It makes a cell stretch across two or more columns, like merging cells horizontally sideways.
Q: What does rowspan do?↓
It makes a cell stretch down two or more rows, like merging cells vertically.
Q: After rowspan, what changes in the next row?↓
You must omit the cell in the next row that was already claimed by the rowspan. Only write the remaining cells that are still free.