HTML <colgroup> element

The <colgroup> element represents a group of one or more columns in a table. It gives the author a way to describe or style columns before the table rows and cells are written.

This is useful because table cells are written row by row, while some styling or meaning may belong column by column. A column group gives the column side of the table a place in the markup.

Place <colgroup> inside <table>, after any <caption> and before the row groups or rows. It can contain <col> elements to describe individual columns, or use span to describe the group without those children.

When span is present, the group must not contain <col> children. Its value is an integer from 1 to 1000, defaulting to 1. With child column definitions instead, their spans determine the size of the group.

The element does not create visible cells. It describes columns that are then used by the table model. Its effects are usually seen through styling or through how the table structure is understood.

Column-group backgrounds show through transparent cells. Text alignment and text colour should be applied to the cells, which do not inherit them from the column group. The example uses one group for names and another, shaded group for two score columns. Neither group merges cells.

Attributes: span, GLOBALS.

Typical layout:
<table>
  <caption>Workshop scores</caption>
  <colgroup></colgroup>
  <colgroup span="2" style="background:#343450;"></colgroup>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HTML</th>
      <th scope="col">CSS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ada</th>
      <td>92</td>
      <td>88</td>
    </tr>
  </tbody>
</table>

Visual representation: