← Back to All Tags

<colgroup>

Specifies a group of one or more columns in a table for formatting

Standard HTML

Definition and Usage

The <colgroup> element specifies a group of one or more columns in a table for formatting purposes. It is useful for applying styles to entire columns, rather than repeating the styles for each cell, row, or header.

The <colgroup> element must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.

Tip: The <colgroup> tag can contain one or more <col> elements or use the span attribute to group multiple columns.
Best Practice: Use <colgroup> with <col> elements for better control and organization of column styling.

Browser Support

The <colgroup> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <colgroup> tag supports the following specific attributes in addition to HTML global attributes:

Attribute Value Description
span number Specifies the number of columns the <colgroup> should span (only used without <col> children)

Position in Table Structure

The <colgroup> element must be placed in a specific order within the table:

Correct Table Structure

<table>
  <caption>Table Caption</caption>  <!-- 1. Caption (optional) -->
  <colgroup>                        <!-- 2. Colgroup (before table content) -->
    <col>
  </colgroup>
  <thead>                           <!-- 3. Table head (optional) -->
    <tr><th>Header</th></tr>
  </thead>
  <tbody>                           <!-- 4. Table body -->
    <tr><td>Data</td></tr>
  </tbody>
  <tfoot>                           <!-- 5. Table foot (optional) -->
    <tr><td>Footer</td></tr>
  </tfoot>
</table>

Examples

Basic Colgroup

Using colgroup with the span attribute:

Example

<table border="1">
  <colgroup span="3" style="background-color: #f0f0f0;"></colgroup>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Colgroup with Col Elements

Using individual col elements for more control:

Example

<table border="1">
  <colgroup>
    <col style="background-color: #ffcccc;">
    <col style="background-color: #ccffcc;">
    <col style="background-color: #ccccff;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Spanning Columns

Grouping multiple columns with span attribute on col elements:

Example

<table border="1">
  <colgroup>
    <col style="background-color: #ffe0e0;">
    <col span="2" style="background-color: #e0ffe0;">
    <col style="background-color: #e0e0ff;">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Alice</td>
    <td>Johnson</td>
    <td>alice@example.com</td>
  </tr>
</table>

Styling Column Groups

Applying different styles to different column groups:

Example

<table border="1" style="width: 100%;">
  <colgroup>
    <col style="width: 20%; background-color: #fff3cd;">
    <col span="2" style="width: 40%; background-color: #d1ecf1;">
    <col style="width: 20%; background-color: #d4edda;">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Q1 Sales</th>
    <th>Q2 Sales</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Widget A</td>
    <td>$5,000</td>
    <td>$6,000</td>
    <td>$11,000</td>
  </tr>
  <tr>
    <td>Widget B</td>
    <td>$4,500</td>
    <td>$5,500</td>
    <td>$10,000</td>
  </tr>
</table>

Complex Table with Multiple Colgroups

Using multiple colgroup elements for different sections:

Example

<table border="1" style="border-collapse: collapse; width: 100%;">
  <colgroup>
    <col style="background-color: #f8f9fa; width: 25%;">
  </colgroup>
  <colgroup>
    <col span="3" style="background-color: #e9ecef; width: 25%;">
  </colgroup>
  <caption>Sales Report 2024</caption>
  <thead>
    <tr>
      <th>Region</th>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>North</td>
      <td>$100K</td>
      <td>$120K</td>
      <td>$150K</td>
    </tr>
    <tr>
      <td>South</td>
      <td>$90K</td>
      <td>$110K</td>
      <td>$130K</td>
    </tr>
  </tbody>
</table>

Try it Yourself

Interactive Example

See how the <colgroup> tag works with table columns:

Monthly Sales Report
Employee January February Total
Alice $15,000 $18,000 $33,000
Bob $12,000 $14,000 $26,000
Carol $20,000 $22,000 $42,000

Colgroup vs Individual Col Elements

Approach When to Use Example
<colgroup span="n"> When all columns need the same styling <colgroup span="3" style="...">
<colgroup> + <col> When columns need different individual styles <colgroup><col><col></colgroup>
Multiple <colgroup> When grouping columns into distinct sections <colgroup>...</colgroup><colgroup>...</colgroup>
<col span="n"> When some columns share styles within a group <col><col span="2"><col>

Best Practices for Table Column Styling

  • Correct placement: Always place <colgroup> after <caption> and before table content
  • Use with col elements: For more control, use <col> elements inside <colgroup>
  • Match column count: Ensure total span counts match the number of table columns
  • Combine approaches: Use multiple <colgroup> elements to group related columns
  • Limit CSS properties: Only use supported properties (background-color, width, visibility, border)
  • Consider accessibility: Ensure adequate color contrast when styling columns
  • Test browser compatibility: Verify column styling works across different browsers
  • Use border-collapse: Set border-collapse: collapse on table for consistent borders
  • Avoid overuse: Don't use colgroup if simple CSS classes on cells would be clearer
  • Document structure: Comment complex column group structures for maintainability

Common Use Cases

Financial Tables

Group and highlight different time periods or categories in financial reports and spreadsheets.

Data Comparison Tables

Visually separate different categories or groups being compared in comparison tables.

Pricing Tables

Highlight featured plans or special pricing tiers with distinct column backgrounds.

Schedules and Timetables

Distinguish between different days, time periods, or event categories in schedule tables.

Advantages of Using Colgroup

✅ Benefits
  • Reduces code repetition
  • Easier to maintain column styles
  • Better semantic structure
  • Centralized column formatting
  • Improves code readability
  • Consistent column widths
  • Simplified styling updates
  • Better organization of styles
⚠️ Limitations
  • Limited CSS property support
  • Cannot style text directly
  • No padding/margin control
  • Border styling limitations
  • Browser implementation varies
  • Cell styles override column styles
  • Complex syntax for beginners
  • Not suitable for all styling needs

Related Tags

  • <col>

    Specifies column properties

  • <table>

    Defines an HTML table

  • <thead>

    Groups header content in a table

  • <tbody>

    Groups body content in a table