<colgroup>

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

Standard HTML

Quick Answer

What is the HTML <colgroup> tag?

The <colgroup> tag groups one or more columns in a table for formatting purposes. It contains <col> elements that define properties for each column. Place it after <caption> (if present) and before table content. This simplifies styling multiple columns without repeating CSS for individual cells.

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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Try in Code Playground

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