Module 5: Tables · Lesson 3 of 5
HTML Table colspan and rowspan: Merge Cells Example
All lessons in Module 5
Goal: Make cells span several columns or rows with colspan and rowspan.
Learn
Some cells need to cover more than one slot. Think of a lunch break across every room, or a two-hour class that fills two time slots. Two cell attributes (opens in a new tab) handle this, and both go on <td> or <th>:
colspan="2"makes the cell 2 columns wide.rowspan="2"makes the cell 2 rows tall.
There is a catch. A stretched cell takes over space that other cells used to fill, so you have to delete the cells it covers. A colspan="2" cell replaces two cells in its own row. With rowspan="2", the row below loses one cell. Skip the deleting and extra cells poke out at the end of the row.
The short version
colspanwidens a cell across columns, androwspanmakes it taller across rows.- Both attributes belong on
<td>or<th>. On<tr>or<table>they do nothing. - Each slot a span covers must lose its own cell, in the same row for colspan and in the rows below for rowspan.
- To check your work, count each row's columns with spanned cells at full width. Every row should reach the same total.
Example
<table>
<tr>
<th>Day</th>
<th>Morning</th>
<th>Afternoon</th>
</tr>
<tr>
<td>Saturday</td>
<td colspan="2">Beach trip</td>
</tr>
<tr>
<td>Sunday</td>
<td>Museum</td>
<td>Picnic</td>
</tr>
</table>Your task
The workshop schedule needs two repairs:
- HTML Basics lasts two hours. Give its 09:00 cell
rowspan="2", then delete the duplicate HTML Basics cell in the 10:00 row. - Lunch happens in both rooms. Give the Lunch cell
colspan="2", then delete the empty cell beside it.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<tr>
<td>09:00</td>
<td rowspan="2">HTML Basics</td>
<td>Color Theory</td>
</tr>
<tr>
<td>10:00</td>
<td>HTML Basics</td>
<td>Fonts</td>
</tr>Right
<tr>
<td>09:00</td>
<td rowspan="2">HTML Basics</td>
<td>Color Theory</td>
</tr>
<tr>
<td>10:00</td>
<td>Fonts</td>
</tr>The tall cell already fills that slot in the next row, so a second HTML Basics cell shoves Fonts out into a fourth column.
Wrong
<tr colspan="2">
<td>Lunch</td>
</tr>Right
<tr>
<td colspan="2">Lunch</td>
</tr>The browser ignores colspan on a tr, so the attribute has to go on the cell or Lunch stays one column wide.
Go deeper
Real data has spans all the time. Timetables use them, invoices use them for a total row, and comparison tables use them for grouped headings, such as a "Price" header over "Monthly" and "Yearly" columns. Write that kind of header as <th colspan="2" scope="colgroup">. Assistive technology then knows it labels a group of columns, and the table meets the WCAG rule on Info and Relationships (opens in a new tab).
The HTML Living Standard sets upper limits: 1000 for colspan and 65534 for rowspan (opens in a new tab). One odd value exists too. rowspan="0" stretches the cell down to the last row of its row group, though few authors use it.
Go easy on merging. Screen readers announce cells by row and column, and a table riddled with spans is hard to follow by ear. If you are merging lots of cells to get a certain look, the data might fit better in two simple tables. Or the look is a job for CSS, as Tables Are Not Layout explains.
Sketch the grid on paper first, shade the merged blocks, and only then write the rows. Moving a span on paper takes seconds; hunting a stray cell in code takes much longer.
Frequently asked questions
How do I merge cells in an HTML table?
Make one cell bigger and delete the cells it replaces. HTML has no merge command as such. For two cells side by side, give the first colspan="2" and delete the second. For two cells stacked on top of each other, give the top one rowspan="2" and delete the matching cell in the row below.
What is the difference between colspan and rowspan?
Direction. colspan stretches a cell horizontally across several columns, like a Lunch cell covering every room. rowspan stretches it vertically down several rows, like a two-hour class filling two time slots. One cell can have both, for example colspan="2" rowspan="2" to cover a 2 by 2 block. The Class Timetable project uses both.
Why does my table have an extra cell sticking out?
Nine times out of ten, a spanned cell shares its space with a cell you forgot to delete. Count the columns in each row. Add the full colspan of wide cells, and include slots already taken by a rowspan from a row above. The row with the highest total has the extra cell. Developer tools outline every cell, so the culprit is quick to find.