Colspan & Rowspan
A cell can cover more than one grid position. Spans are useful for a real shared label, but large merged regions can make data relationships harder to understand.
How it works
- colspan specifies how many columns a cell covers; rowspan specifies how many rows it covers. Values represent grid positions, not pixels.
- Account for occupied positions when adding the remaining cells. A spanned row does not also need duplicate cells underneath the same region.
- Use spans sparingly. If the table becomes hard to explain aloud, split it into simpler tables with clear captions.
A practical example
<table>
<caption>Workshop totals</caption>
<tr><th scope="col">Session</th><th scope="col">Places</th></tr>
<tr><td>Bike repair</td><td>8</td></tr>
<tr><td colspan="2">Booking closes on Friday.</td></tr>
</table>
The last cell covers both columns. It is one cell spanning two positions rather than two separate cells with repeated text.