<colgroup>

<colgroup> represents a group of columns in a table. Place it after the caption and before any row groups or rows.

Style a group of columns

This example uses two groups: the workshop column and the count column. A group with span has no child <col> elements.

<table>
  <caption>
    Workshop registrations
  </caption>
  <colgroup span="1"></colgroup>
  <colgroup span="1" class="highlight"></colgroup>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Places booked</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML basics</th>
      <td class="amount">12</td>
    </tr>
    <tr>
      <th scope="row">CSS layout</th>
      <td class="amount">8</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td class="amount">20</td>
    </tr>
  </tfoot>
</table>

/* Presentation: these styles make the table easier to read. */
table {
  border-collapse: collapse;
}
caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
th,
td {
  border: 1px solid #94a3b8;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.highlight {
  background: #dbeafe;
}

Two ways to describe columns

Use <colgroup span="2"> for two columns treated together, or omit span and put individual col elements inside. Do not combine both forms. span must be a positive integer and defaults to 1.

Backgrounds, collapsed borders, width, and visibility: collapse have defined column-group effects. Most other styles do not. Table cells are not DOM descendants of <colgroup>, so setting text-align or font-weight on the group does not style their text.

Inspect the painting order

Add td { background: white; } in the editor. The white cells hide the column-group background beneath them. Remove that declaration to reveal the highlight again. For textual emphasis, use a class on the actual cells.

A colored group is not an accessibility relationship. Use proper header cells even when the visual grouping seems obvious.

Sources and browser support

MDN: colgroup describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.