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

<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>

Finished reading?

Mark this topic as complete to track progress.

Next Topic

<a> Anchor Links