Path // www.yourhtmlsource.com → Reference → <COLGROUP> ELEMENT

<colgroup> element

by Ross Shannon

The <colgroup> element defines a group of columns in a table. It can contain <col> elements to specify properties for individual columns, or use the span attribute to apply properties to multiple columns at once. Column groups must appear after any <caption> element but before <thead>, <tbody>, <tfoot>, or <tr> elements.

Clock This page was last updated on 2025-11-17


Syntax

The colgroup element is placed at the beginning of a table, after any caption:

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
</table>

Alternatively, without col elements:

<table>
  <colgroup span="3"></colgroup>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
</table>

Key Attributes

  • span — Specifies the number of columns the group spans. This attribute is only valid when the colgroup does NOT contain any <col> elements. Default is 1.

The following attributes are obsolete:

  • align — Use CSS text-align on cells instead
  • valign — Use CSS vertical-align on cells instead
  • width — Use CSS width instead
  • char — Character for alignment
  • charoff — Offset for character alignment

Like <col>, only certain CSS properties work on colgroup: background, border (with border-collapse), width, and visibility.

Examples

Multiple Column Groups

<table>
  <colgroup>
    <col style="width: 150px;">
  </colgroup>
  <colgroup style="background-color: #e0e0e0;">
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>$100</td>
    <td>$120</td>
    <td>$115</td>
  </tr>
</table>

Using Span Attribute

<table>
  <colgroup span="2" style="background-color: #ffffcc;"></colgroup>
  <colgroup span="2" style="background-color: #ccffcc;"></colgroup>
  <tr>
    <th>Group A</th>
    <th>Group A</th>
    <th>Group B</th>
    <th>Group B</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

Styled Column Groups

<style>
  .info-cols {
    background-color: #f0f8ff;
  }
  .data-cols {
    background-color: #fff0f0;
  }
</style>

<table>
  <colgroup class="info-cols">
    <col style="width: 100px;">
    <col style="width: 150px;">
  </colgroup>
  <colgroup class="data-cols">
    <col>
    <col>
  </colgroup>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Value 1</th>
    <th>Value 2</th>
  </tr>
  <tr>
    <td>001</td>
    <td>Item A</td>
    <td>25</td>
    <td>30</td>
  </tr>
</table>

Complete Table with Caption and Colgroup

<table>
  <caption>Sales by Region</caption>
  <colgroup>
    <col style="width: 120px;">
  </colgroup>
  <colgroup span="4"></colgroup>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$10K</td>
      <td>$12K</td>
      <td>$11K</td>
      <td>$15K</td>
    </tr>
  </tbody>
</table>

When to Use

Use colgroup for:

  • Logically grouping related columns together
  • Applying consistent styling across multiple columns
  • Setting uniform widths for groups of columns
  • Providing semantic structure to complex tables

Important considerations:

  • Colgroup must appear before thead, tbody, tfoot, or any tr elements
  • If using span attribute, colgroup cannot contain col elements
  • Multiple colgroup elements can be used in a single table
  • The total number of columns defined should match the actual table columns

When not to use:

  • For text styling (font, color) — these won’t work
  • For complex cell-specific styling — use CSS selectors on cells instead
  • For simple tables where column styling isn’t needed

Column groups provide structural information about your table, which can be useful for both styling purposes and helping assistive technologies understand the table’s organization.

  • <col> — Column definition (child element)
  • <table> — Table container (parent element)
  • <caption> — Table caption (sibling)
  • <thead> — Table header group (sibling)
  • <tbody> — Table body group (sibling)