Menu
Lists & Tables
colspan, rowspan & <colgroup>
Merging cells and styling whole columns.
1Merging Cells
colspan makes a cell span multiple columns. rowspan makes it span multiple rows. <colgroup> + <col> let you style entire columns at once.
Example Code
css
<table>
<colgroup>
<col style="background:#f8fafc" />
<col span="2" />
</colgroup>
<tr>
<th rowspan="2">Region</th>
<th colspan="2">Sales</th>
</tr>
<tr><th>Q1</th><th>Q2</th></tr>
<tr><td>North</td><td>$100</td><td>$120</td></tr>
</table>2Put the element in context
Rowspan and colspan combine cells across a table’s grid. They can express grouped data but also make header relationships harder to follow. A simpler table may be easier to maintain and use when the spans exist only to achieve a decorative arrangement.
3Practice with a small page
Build a small grouped schedule with one spanning header. Count the remaining cells in each row and inspect alignment. Compare it with a simpler version and keep the spans only when they clarify a real data relationship.
Finished reading?
Mark this topic as complete to track progress.