Sometimes a piece of data needs to stretch across multiple columns or rows. Like a "Total" row that spans the whole table, or a category label that covers several items below it. That is where colspan and rowspan come in.
colspan — Merging Columns
Add colspan="2" to a <td> or <th> to make it stretch across two columns. The number tells the browser how many columns the cell should cover.
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Contact Info</th>
</tr>
<tr>
<td>Alice</td>
<td>alice@example.com</td>
<td>555-1234</td>
</tr>
</table>
rowspan — Merging Rows
rowspan works vertically. A cell with rowspan="3" will stretch down across three rows. The rows below need fewer cells since the spanning cell already covers that column.
<table border="1">
<tr>
<th>Department</th>
<th>Employee</th>
</tr>
<tr>
<td rowspan="3">Engineering</td>
<td>Alice</td>
</tr>
<tr>
<td>Bob</td>
</tr>
<tr>
<td>Charlie</td>
</tr>
</table>
Notice how the Engineering cell only appears once but visually covers three rows. The <tr> tags for Bob and Charlie do not include a first cell — the spanning cell from the first row takes care of it.
Using Both Together
You can even combine colspan and rowspan in the same cell. This is useful for complex layouts like schedules or financial reports.
<table border="1">
<tr>
<th>Project</th>
<th>Q1</th>
<th>Q2</th>
</tr>
<tr>
<td rowspan="2">Website Redesign</td>
<td>$5,000</td>
<td>$3,000</td>
</tr>
<tr>
<td colspan="2">Completed early</td>
</tr>
</table>
Just remember: when you merge cells, the total number of "logical" cells in each row must stay consistent. If one cell spans 3 columns, that row effectively has 3 fewer cells.