Spanning Rows and Columns
Merge cells with colspan and rowspan.
Syntax
<td colspan="2">Wide cell</td>You can make a cell stretch across multiple columns or rows.
colspan— makes a cell span multiple columns.rowspan— makes a cell span multiple rows.
The value is the number of columns or rows to cover.
Example
Loading editor…
Press Run to see the result.
When to use it
- A timetable merges cells using colspan to show a class that spans two time slots horizontally.
- A report table uses rowspan to label a category that applies to multiple rows underneath it.
- A seating chart uses colspan and rowspan together to model irregular seat layouts in an HTML table.
More examples
Column span across two cells
colspan="2" makes the header span both columns, visually grouping them under one label.
<table border="1">
<tr>
<th colspan="2">Contact Info</th>
</tr>
<tr>
<td>Email</td>
<td>Phone</td>
</tr>
<tr>
<td>[email protected]</td>
<td>+1-555-0100</td>
</tr>
</table>Row span for a label column
rowspan="3" stretches the quarter label down across all three month rows in the same table.
<table border="1">
<tr>
<th rowspan="3">Q1</th>
<td>January</td>
<td>$4,200</td>
</tr>
<tr>
<td>February</td>
<td>$5,100</td>
</tr>
<tr>
<td>March</td>
<td>$6,300</td>
</tr>
</table>Combined colspan and rowspan
Combining colspan and rowspan creates merged regions that span multiple rows and columns simultaneously.
<table border="1">
<tr>
<th colspan="2" rowspan="2">Top-Left Block</th>
<th>Col 3</th>
</tr>
<tr>
<td>Data C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Discussion