Column Groups

Style and group table columns with <colgroup> and <col> elements.

Overview

The <colgroup> and <col> elements let you apply styles and attributes to entire columns of a table without repeating them on every cell. This is the semantic HTML approach to column-level styling. <colgroup> is placed inside <table> before any <thead>, <tbody>, or <tfoot>. Each <col> inside it represents one or more columns. The span attribute on <col> makes it span multiple columns. Browsers support limited CSS properties on <col>: width, background-color, border, and visibility. Most layout properties must still be applied per-cell.

Key Points

•<colgroup> must appear before <thead>/<tbody> but after <caption>
•Each <col> represents one column; span="2" covers two columns
•col accepts limited CSS: width, background, border, visibility
•colgroup can have a span attribute to cover multiple columns at once
•column-level width is more efficient than setting width per cell
•Accessibility tip: colgroup provides no semantic meaning; use scope="col" on <th> for accessibility

Examples

Setting column widths and backgrounds

<table>
  <caption>Monthly Budget</caption>
  <colgroup>
    <col style="width: 200px; background-color: #f0fdf4;">
    <col span="3" style="width: 100px;">
    <col style="width: 120px; background-color: #fef3c7;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Jan</th>
      <th scope="col">Feb</th>
      <th scope="col">Mar</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rent</td>
      <td>$1,200</td>
      <td>$1,200</td>
      <td>$1,200</td>
      <td>$3,600</td>
    </tr>
    <tr>
      <td>Utilities</td>
      <td>$85</td>
      <td>$92</td>
      <td>$78</td>
      <td>$255</td>
    </tr>
  </tbody>
</table>

The first and last columns have distinct backgrounds.

Using span on col

<table>
  <colgroup>
    <!-- First column: label -->
    <col style="font-weight: bold; width: 150px;">
    <!-- Next 4 columns: data columns (span=4) -->
    <col span="4" style="width: 80px; text-align: center;">
  </colgroup>
  <!-- table rows... -->
</table>

Highlighting a column

<style>
  .selected-col { background-color: #dbeafe; }
</style>
<table>
  <colgroup>
    <col>
    <col>
    <col class="selected-col">  <!-- Highlight Q3 column -->
    <col>
  </colgroup>
  <!-- ... -->
</table>

Common Mistakes

Placing <colgroup> after <thead> it must appear before all row groups
Using colgroup for complex per-cell styling most CSS properties only work on colgroup via limited support
Forgetting to count cols correctly if you have 5 columns, your col elements must total 5

Note

The most practical use of <col> is setting column widths. A table with fixed column widths renders faster because the browser doesn't have to calculate widths from content.

Column Groups

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Where must <colgroup> appear in the table structure?