<col>

<col> represents one or more columns in a colgroup. It has no cell content and is a void element: write <col>, without an end tag.

Highlight a column

The second column receives a pale background through <col>. The cell text alignment is set on <td>, because cells are not children of <col>.

<table>
  <caption>
    Workshop registrations
  </caption>
  <colgroup>
    <col />
    <col 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;
}

Placement and attributes

Place <col> inside a <colgroup> that has no span attribute. A column’s own span is a positive number of consecutive columns and defaults to 1.

Only a limited set of CSS properties affect columns: backgrounds, borders when the table uses collapsed borders, width (as a minimum), and visibility: collapse. A cell or row’s opaque background can hide the column background.

Why a style may not work

text-align, color, and font styles on <col> do not cascade into cells, because those cells are elsewhere in the DOM. Apply those properties to the relevant <th> and <td> elements. The example uses .amount on each data cell; selecting by cell position can become misleading when cells span columns.

Column highlighting is visual. It does not establish accessible header associations; keep the caption and th cells.

Sources and browser support

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