Not every piece of data fits perfectly into a 1x1 box. In spreadsheet applications like Excel, merging cells is a primary feature for creating group headers or combining related data. HTML achieves the exact same structural mechanic using two powerful attributes: colspan and rowspan.
The colspan attribute instructs an individual cell to stretch horizontally across the table grid. By specifying a numerical value, you dictate how many standard columns this cell will replace.
<!-- A simple 5 column table... -->
<table style="width:100%;">
<tr>
<!-- ...but the top row only has one cell! -->
<!-- It stretches wide enough to cover all 5 slots beneath it. -->
<th colspan="5" style="text-align: center; background: #ddd;">Full Year Financial Overview</th>
</tr>
<tr>
<td>Q1 Start</td>
<td>Q1 End</td>
<td>Mid-Year Review</td>
<td>Q3 Report</td>
<td>Annual Summary</td>
</tr>
</table>| Grand Title (Colspan 3) | ||
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
<td> tags in that specific row. If a row is supposed to have 4 total columns, and one cell has colspan="3", you only need one other standard cell (1 + 3 = 4). Otherwise, your row will bulge out past the edge of the table!
The rowspan attribute serves the exact same purpose, but on the vertical axis. It tells a cell to push downward, absorbing the empty slots in the rows underneath it.
This is commonly used for establishing a main category on the left side, with multiple sub-entries arrayed alongside it.
<table style="width:100%;">
<tr>
<!-- This cell drops down into the next row! -->
<th rowspan="2" style="background: #eef;">Contact Info</th>
<td>Primary Phone: 555-0199</td>
</tr>
<tr>
<!-- There is only ONE cell in this row. -->
<!-- The first cell slot is occupied by the "Contact Info" header from above. -->
<td>Alt Email: user@example.com</td>
</tr>
</table>| Category: Support | Ticket #991: Open |
| Ticket #992: Closed |