<colgroup> - Table Column Group Element

The <colgroup> Element

Table Element

The <colgroup> element defines a group of one or more columns in a table. It allows you to apply styles and attributes to entire columns without having to repeat them for each cell. The <colgroup> must appear after any <caption> but before any table rows (<thead>, <tbody>, <tfoot>, or <tr>).

Why Use colgroup?

Instead of styling each cell individually, <colgroup> and <col> let you style entire columns at once, making your CSS more maintainable and efficient.

Quick Example

HTML

<table> <caption>Product Catalog</caption> <colgroup> <col style="background-color: #e3f2fd;"> <col style="background-color: #fff3e0;"> <col style="background-color: #f3e5f5;"> <col style="background-color: #e8f5e9;"> </colgroup> <thead> <tr> <th scope="col">Product</th> <th scope="col">Category</th> <th scope="col">Price</th> <th scope="col">Stock</th> </tr> </thead> <tbody> <tr> <td>Laptop</td> <td>Electronics</td> <td>$899</td> <td>15</td> </tr> <tr> <td>Desk Chair</td> <td>Furniture</td> <td>$249</td> <td>32</td> </tr> <tr> <td>Notebook</td> <td>Stationery</td> <td>$5</td> <td>150</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } thead { background-color: #2c3e50; color: white; } </style>

Result ▶ Run

Syntax

<table>
  <caption>Table caption</caption>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <!-- table content -->
  </thead>
</table>

Placement in Table

The <colgroup> must appear in this order:

1. <caption> (if present)
2. <colgroup> (if present)
3. <thead>, <tbody>, <tfoot>, or <tr>

Note

The <colgroup> must come before any table content rows. It defines the column structure before the data appears.

Attributes

span Attribute

The span attribute specifies how many consecutive columns the <colgroup> represents. This is used when you don’t include individual <col> elements.

<colgroup span="3" style="background-color: #f0f0f0;"></colgroup>

Global Attributes

The <colgroup> element supports all global HTML attributes.

Deprecated Attributes

Caution

The following attributes are deprecated. Use CSS instead:

• align, bgcolor, char, charoff, valign, width

Common Use Cases

Styling Column Groups

HTML

<table> <caption>Quarterly Financial Report</caption> <colgroup> <col> </colgroup> <colgroup style="background-color: #e3f2fd;"> <col> <col> <col> </colgroup> <colgroup style="background-color: #fff3e0;"> <col> <col> <col> </colgroup> <thead> <tr> <th scope="col">Category</th> <th scope="colgroup" colspan="3">Q1</th> <th scope="colgroup" colspan="3">Q2</th> </tr> <tr> <th scope="col"></th> <th scope="col">Jan</th> <th scope="col">Feb</th> <th scope="col">Mar</th> <th scope="col">Apr</th> <th scope="col">May</th> <th scope="col">Jun</th> </tr> </thead> <tbody> <tr> <th scope="row">Revenue</th> <td>$50K</td> <td>$55K</td> <td>$48K</td> <td>$52K</td> <td>$58K</td> <td>$60K</td> </tr> <tr> <th scope="row">Expenses</th> <td>$30K</td> <td>$32K</td> <td>$28K</td> <td>$31K</td> <td>$35K</td> <td>$34K</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; font-size: 0.9em; } th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } thead tr:first-child { background-color: #2c3e50; color: white; } thead tr:last-child { background-color: #34495e; color: white; } tbody th { background-color: #ecf0f1; text-align: left; } </style>

Result ▶ Run

Alternating Column Colors

HTML

<table> <caption>Team Roster</caption> <colgroup> <col style="background-color: #ffffff;"> <col style="background-color: #f8f9fa;"> <col style="background-color: #ffffff;"> <col style="background-color: #f8f9fa;"> </colgroup> <thead> <tr> <th scope="col">Name</th> <th scope="col">Position</th> <th scope="col">Years</th> <th scope="col">Email</th> </tr> </thead> <tbody> <tr> <td>Alice Johnson</td> <td>Manager</td> <td>5</td> <td>alice@example.com</td> </tr> <tr> <td>Bob Martinez</td> <td>Developer</td> <td>3</td> <td>bob@example.com</td> </tr> <tr> <td>Carol White</td> <td>Designer</td> <td>4</td> <td>carol@example.com</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } thead { background-color: #3498db; color: white; } </style>

Result ▶ Run

Highlighting Specific Columns

HTML

<table> <caption>Test Scores - Highest Score Highlighted</caption> <colgroup> <col> <col> <col style="background-color: #fff3cd; font-weight: bold;"> <col> </colgroup> <thead> <tr> <th scope="col">Student</th> <th scope="col">Math</th> <th scope="col">Science</th> <th scope="col">English</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>85</td> <td>95</td> <td>88</td> </tr> <tr> <td>Bob</td> <td>78</td> <td>92</td> <td>82</td> </tr> <tr> <td>Carol</td> <td>92</td> <td>89</td> <td>94</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 10px; text-align: center; } thead { background-color: #27ae60; color: white; } tbody td:first-child { text-align: left; } </style>

Result ▶ Run

Using span Attribute

Instead of multiple <col> elements, you can use span:

With <col> elements

<colgroup>
  <col>
  <col>
  <col>
</colgroup>

With span attribute

<colgroup span="3"></colgroup>

HTML

<table> <caption>Using span attribute</caption> <colgroup span="1" style="background-color: #e3f2fd;"></colgroup> <colgroup span="3" style="background-color: #fff3e0;"></colgroup> <thead> <tr> <th scope="col">Product</th> <th scope="col">Q1</th> <th scope="col">Q2</th> <th scope="col">Q3</th> </tr> </thead> <tbody> <tr> <td>Widget A</td> <td>$100K</td> <td>$120K</td> <td>$115K</td> </tr> <tr> <td>Widget B</td> <td>$85K</td> <td>$95K</td> <td>$105K</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } thead { background-color: #8e44ad; color: white; } td:nth-child(n+2) { text-align: right; } </style>

Result ▶ Run

Combining Multiple Column Groups

HTML

<table> <caption>Sales Data by Region and Quarter</caption> <colgroup> <col style="background-color: #ecf0f1; font-weight: bold;"> </colgroup> <colgroup> <col style="background-color: #d1f2eb;"> <col style="background-color: #d1f2eb;"> </colgroup> <colgroup> <col style="background-color: #fdebd0;"> <col style="background-color: #fdebd0;"> </colgroup> <thead> <tr> <th scope="col">Region</th> <th scope="colgroup" colspan="2">North</th> <th scope="colgroup" colspan="2">South</th> </tr> <tr> <th scope="col"></th> <th scope="col">Q1</th> <th scope="col">Q2</th> <th scope="col">Q1</th> <th scope="col">Q2</th> </tr> </thead> <tbody> <tr> <th scope="row">Sales</th> <td>$120K</td> <td>$145K</td> <td>$98K</td> <td>$115K</td> </tr> <tr> <th scope="row">Growth</th> <td>+12%</td> <td>+21%</td> <td>+8%</td> <td>+17%</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 10px; text-align: center; } thead tr:first-child { background-color: #2c3e50; color: white; } thead tr:last-child { background-color: #34495e; color: white; } tbody th { text-align: left; } </style>

Result ▶ Run

Styling Limitations

Limited CSS Properties

Only a limited set of CSS properties work on <colgroup> and <col>:

• background and background-color
• border (only if border-collapse: collapse)
• width
• visibility

Other properties like color, font-size, or padding won’t work.

What Works

HTML

<table> <caption>Supported CSS Properties</caption> <colgroup> <col style="background-color: #e8f5e9; width: 30%;"> <col style="background-color: #fff3e0; width: 40%;"> <col style="background-color: #fce4ec; width: 30%;"> </colgroup> <thead> <tr> <th scope="col">Column 1</th> <th scope="col">Column 2</th> <th scope="col">Column 3</th> </tr> </thead> <tbody> <tr> <td>Background color works</td> <td>Width works</td> <td>Border works (with collapse)</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 10px; text-align: left; } thead { background-color: #16a085; color: white; } </style>

Result ▶ Run

Advanced Patterns

Data Table with Column Grouping

HTML

<table> <caption>Employee Performance Metrics</caption> <colgroup> <col style="background-color: #f8f9fa;"> </colgroup> <colgroup> <col style="background-color: #e3f2fd;"> <col style="background-color: #e3f2fd;"> <col style="background-color: #e3f2fd;"> </colgroup> <colgroup> <col style="background-color: #f3e5f5;"> <col style="background-color: #f3e5f5;"> </colgroup> <thead> <tr> <th scope="col">Employee</th> <th scope="colgroup" colspan="3">Productivity</th> <th scope="colgroup" colspan="2">Quality</th> </tr> <tr> <th scope="col"></th> <th scope="col">Tasks</th> <th scope="col">On Time</th> <th scope="col">Rate</th> <th scope="col">Score</th> <th scope="col">Rating</th> </tr> </thead> <tbody> <tr> <th scope="row">Alice</th> <td>42</td> <td>95%</td> <td>High</td> <td>9.2</td> <td>A</td> </tr> <tr> <th scope="row">Bob</th> <td>38</td> <td>88%</td> <td>Med</td> <td>8.5</td> <td>B+</td> </tr> </tbody> </table> <style> table { border-collapse: collapse; width: 100%; font-size: 0.9em; } th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } thead tr:first-child { background-color: #2c3e50; color: white; } thead tr:last-child { background-color: #34495e; color: white; } tbody th { background-color: #ecf0f1; text-align: left; } </style>

Result ▶ Run

CSS Styling Reference

/* Basic colgroup styling */
colgroup {
  background-color: #f0f0f0;
}

/* Individual col within colgroup */
colgroup col:nth-child(1) {
  background-color: #e3f2fd;
}

colgroup col:nth-child(2) {
  background-color: #fff3e0;
}

/* Width specification */
colgroup col {
  width: 25%;
}

/* Hiding columns */
colgroup col.hidden {
  visibility: collapse;
}

/* Border styling (requires border-collapse) */
table {
  border-collapse: collapse;
}

colgroup col {
  border-right: 2px solid #333;
}

/* Multiple column groups */
colgroup:nth-of-type(1) {
  background-color: #e8f5e9;
}

colgroup:nth-of-type(2) {
  background-color: #fff3e0;
}

Best Practices

Use for Column Styling

Use <colgroup> and <col> to apply consistent styles to entire columns.

Place Correctly

Always place <colgroup> after <caption> but before table content.

Match Column Count

Ensure the number of <col> elements matches the number of table columns.

Know CSS Limitations

Remember only certain CSS properties work on column elements.

Use for Semantic Grouping

Group related columns together for better semantic structure.

Consider Accessibility

While <colgroup> is structural, ensure column relationships are also expressed in headers.

When to Use <colgroup>

Use When

• Applying the same background color to multiple columns
• Setting consistent widths for columns
• Visually grouping related columns
• Creating alternating column colors
• Setting borders on specific columns

Don't Use When

• You need to apply text styles (use CSS classes on cells instead)
• You need padding or margins (not supported)
• Simple tables with no column-specific styling
• You need complex per-cell styling

Browser Support

The <colgroup> element is supported in all browsers:

• ✅ Chrome (all versions)
• ✅ Firefox (all versions)
• ✅ Safari (all versions)
• ✅ Edge (all versions)
• ✅ Opera (all versions)
• ✅ Internet Explorer (all versions)

Note

While <colgroup> is universally supported, CSS property support on columns varies. Always test styling across browsers.

Related Elements

• <table> - Parent table element
• <col> - Individual column within a colgroup
• <caption> - Table caption
• <thead> - Groups header rows
• <tbody> - Groups body rows

Specifications

• HTML Living Standard - The colgroup element
• MDN Web Docs - colgroup
• W3C HTML 5.2 - colgroup