Columns as a group in HTML

colgroup is the one place you can address a whole table column at once.

<table>
  <colgroup>
    <col class="label">
    <col span="2" class="numbers">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>1,200</td>
      <td>1,430</td>
    </tr>
  </tbody>
</table>

How it works

1. <colgroup> comes before any row, after an optional caption.
2. span on a <col> covers several columns with one element.
3. Only a few properties apply to a column: background, border, width.

The run, in numbers

Lines

20

Characters to type

279

Tokens

117

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 100 seconds.

Type this snippet

Step 4 of 4 in Tables, step 26 of 28 in Document structure.

← Previous Next →