Spanning & Captions
Overview
Real-world data is rarely a perfect grid. Sometimes, a single piece of data (like a date heading or a merged 'Total' cell) needs to stretch across multiple columns or multiple rows. HTML allows you to break the strict grid using the colspan and rowspan attributes. Furthermore, every complex table should have a <caption>, which acts exactly like a title for the entire table, providing immediate context to users before they begin scanning the data.
Syntax
<table>
<!-- CAPTION: The overarching title of the table -->
<caption>Quarterly Revenue Report (2026)</caption>
<tr>
<th>Region</th>
<th>Q1</th>
<th>Q2</th>
</tr>
<tr>
<td>North America</td>
<td>$10k</td>
<td>$15k</td>
</tr>
<tr>
<td>Europe</td>
<!-- ROWSPAN: This cell stretches vertically across 2 rows! -->
<td rowspan="2">Data Missing</td>
<td>$8k</td>
</tr>
<tr>
<td>Asia</td>
<!-- The Q1 cell is missing here because the row above spans into it -->
<td>$12k</td>
</tr>
<tr>
<!-- COLSPAN: This cell stretches horizontally across 2 columns! -->
<td colspan="2"><strong>Global Total (Approx)</strong></td>
<td><strong>$45k</strong></td>
</tr>
</table>Common Pitfalls
- Miscalculating colspans and rowspans. If you have a 3-column table, and you declare a cell with
colspan="4", or you forget to delete the sibling cells that were meant to be overwritten by a span, the browser will violently warp and break the table layout trying to fit the extra invisible columns. - Placing the
<caption>tag anywhere other than immediately after the opening<table>tag. It must be the very first child of the table.
Interview Questions
rowspan="3", what must you do to the subsequent two <tr> rows below it?You must omit exactly one <td> from the same column position in those two subsequent rows, because the spanning cell from above physically occupies that space in the grid.
Real-World Example
Merging cells to create a unified header spanning multiple sub-columns.
<tr>
<th rowspan="2">Student Name</th>
<!-- One major header stretching over two sub-headers -->
<th colspan="2">Final Exam Scores</th>
</tr>
<tr>
<!-- These are tucked neatly underneath the spanned header -->
<th>Math</th>
<th>Science</th>
</tr>Check Your Knowledge
Test your understanding of Spanning & Captions with these quick questions.