Français

<colgroup>

Style entire columns without repeating CSS in every cell

— 1 min read

  • HTML
  • accessibility
  • semantics
  • tables

<colgroup> + <col> — Styling columns

<colgroup> defines a group of columns in a table. <col> represents one or more columns within that group. They let you apply styles or attributes to entire columns without repeating classes on every <td>.

When to use it

You want to highlight a column — for example, emphasize the "Total" column or apply a fixed width to the first column. Place <colgroup> after <caption> and before <thead>.

What you gain

Accessibility: <colgroup> and <col> have no direct impact on assistive technologies, but they encourage a clean table structure. The span attribute lets you group logically related columns.

Code example

<table>
  <caption>Team allocation</caption>
  <colgroup>
    <col />
    <col span="2" class="highlight" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Project A</th>
      <th scope="col">Project B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>80%</td>
      <td>20%</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>50%</td>
      <td>50%</td>
    </tr>
  </tbody>
</table>

Further reading