HTML <colgroup> Tag

Q: What is the HTML colgroup tag used for?

The colgroup element groups one or more columns in a table so you can apply column-level presentation from a single place. It usually contains col elements that define styles for each column.

Q: What is the difference between colgroup and col?

colgroup is the container that groups columns. col is the child element inside colgroup that styles individual columns or spans of columns.

Q: What does the span attribute on colgroup do?

When colgroup has no col children, span specifies how many columns belong to that group. When col elements are present, use span on col instead for per-column rules.

Q: Where does colgroup go inside a table?

Place colgroup inside table, typically after caption (if any) and before thead, tbody, tfoot, or tr elements.

Q: Can I style columns without colgroup?

col elements must be inside colgroup in valid HTML. You can also style cells with CSS on th and td, but colgroup plus col is the semantic way to target whole columns.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Tables

HTML colgroup tag tutorial — grouping and styling table columns

Overview

What You’ll Learn

By the end of this tutorial, you’ll group table columns and organize column-level styling with <colgroup>.

Colgroup Syntax

Place <colgroup> inside <table> with col children.

Column Grouping

Organize column definitions in one structured block.

span Attribute

Count columns in a group when no col children exist.

colgroup vs col

Understand container vs individual column rules.

Column Styling

Apply backgrounds and widths through child col elements.

Accessible Tables

Pair column groups with caption and proper headers.

Fundamentals

What Is the `<colgroup>` Tag?

The colgroup element (<colgroup>) represents a group of one or more columns in a table. It does not render visible content by itself—it organizes column definitions, usually through child <col> elements.

💡

Container for col elements

Place <colgroup> inside <table>, after caption and before thead/tbody. Put styling rules on child col elements.

Common uses include reports, pricing tables, schedules, and dashboards where you want consistent column widths or backgrounds without styling every cell individually.

Foundation

📝 Syntax

Place <colgroup> inside <table> with one or more <col> children:

syntax.html

<table>
  <colgroup>
    <col style="background:#f8fafc">
    <col style="background:#eff6ff">
  </colgroup>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alex</td><td>92</td></tr>
  </tbody>
</table>

Syntax Rules

<colgroup> is a table structural element—not visible on its own.
Place it after caption (if any) and before row content.
Put col children inside for per-column styling rules.
Use span on empty colgroup to count columns without col children.

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Result
With col children	`<colgroup><col></colgroup>`	Standard column grouping
Empty group + span	`<colgroup span="2"></colgroup>`	Two columns in the group
Column styling	CSS on child `col`	Background and width on columns
Table placement	After caption, before thead	Valid early table position
Pair with caption	`<caption>` + colgroup	Accessible table structure
Tag-specific attrs	`span`	Plus global attributes

Comparison

⚖️ `<colgroup>` vs `<col>`

These elements work together to define column presentation:

Feature	<colgroup>	<col>
Role	Container for column definitions	Styles one or more columns
Placement	Direct child of `table`	Child of `colgroup`
span on colgroup	When no `col` children	Counts columns in the group
span on col	With `col` children present	Styles multiple adjacent columns

Reference

🧰 Attributes

Important <colgroup> attributes for beginners:

span Tag-specific

Column count when colgroup has no col children.

span="2"

class Global

CSS hook for grouping or targeting column sets.

class="data-cols"

style Global

Limited effect—prefer styling child col elements.

style="..."

Children col

Optional col elements define per-column rules.

<col>

Parent Required

Must be a direct child of table.

<table><colgroup>

Position Early

After caption, before thead/tbody/tr.

caption → colgroup → rows

When you use col children, put span on col for multi-column styling—not redundantly on both colgroup and every col.

Hands-On

Examples Gallery

Colgroup structure, column widths, backgrounds, and span grouping with copy-ready code and live table previews.

Live Preview

A table with <colgroup> and colored columns:

Product	Qty
Notebooks	24

Basic colgroup with col

A three-column table with one colgroup and three col rules.

basic-colgroup.html

<table>
  <colgroup>
    <col style="width:35%;background:#f8fafc">
    <col style="width:35%;background:#f8fafc">
    <col style="width:30%;background:#eff6ff">
  </colgroup>
  <tr><th>First</th><th>Second</th><th>Third</th></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

Try It Yourself

First	Second	Third
A	B	C

📚 Common Use Cases

Use <colgroup> for reports, pricing tables, schedules, and dashboards where you want consistent column widths or backgrounds without styling every cell individually.

Column Widths

Set proportional widths on col inside colgroup with table-layout: fixed.

column-widths.html

<colgroup>
  <col style="width:30%">
  <col style="width:70%">
</colgroup>

Try It Yourself

Item	Description
Apple	Red and sweet fruit

Column Background Colors

Use readable pastel backgrounds on col elements—not harsh colors that hurt contrast.

column-colors.html

<colgroup>
  <col style="background:#fef9c3">
  <col style="background:#dcfce7">
</colgroup>

Try It Yourself

Name	Age
Alice	25

colgroup span (No col Children)

Use span on empty colgroup elements to define column groups without individual col rules.

colgroup-span-groups.html

<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<!-- Four columns in two groups of two -->

Try It Yourself

Jan	Feb	Mar	Apr
10	12	14	11

Design

Styling <colgroup> and <col> with CSS

Apply column presentation through CSS on child col elements inside colgroup:

background Column highlight

width Fixed proportions

colgroup span Group column count

table-layout Fixed table layout

colgroup-styles.css

/* Style columns inside colgroup */
colgroup col.highlight {
  background: #eff6ff;
}

table {
  table-layout: fixed;
  width: 100%;
}

colgroup col.col-narrow { width: 30%; }
colgroup col.col-wide   { width: 70%; }

Live styled colgroup table

Code	Product Name
SKU-01	Wireless keyboard

A11y

♿ Accessibility

colgroup helps presentation, but accessible tables need structure too:

Add caption — describe what the table contains.
Use th with scope — column styling does not replace headers.
Maintain contrast — column backgrounds must keep text readable.
Do not rely on color alone — labels must convey meaning.

🧠 How <colgroup> Works

Author adds colgroup in table

Place it after caption, before row content.

Markup

col elements define columns

Each col maps to one or more vertical columns.

Grouping

Browser applies column styles

Width and background cascade to cells in each column.

Rendering

Organized, styled tables

Column rules live in one block instead of repeated cell classes.

Compatibility

Universal Browser Support

The <colgroup> element is supported in all browsers, including Internet Explorer.

✓ Baseline · Since HTML 4

Column grouping that works everywhere

From legacy Internet Explorer to the latest mobile browsers — the colgroup element is fully supported for organizing table columns.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<colgroup> tag 100% supported

Bottom line: Ship organized table columns with confidence. The <colgroup> element is safe to use in every production environment today.

Wrap Up

Conclusion

The <colgroup> tag organizes column definitions in HTML tables. Pair it with <col> for styling, use span correctly on colgroup or col, and combine with caption and proper headers.

Column grouping keeps your table markup DRY—one structured block instead of repeated styling on every cell.

View Examples Gallery Try colgroup + col

Pro Tips

💡 Best Practices

✅ Do

Put col elements inside colgroup
Use background and width CSS on col
Place colgroup before table body rows
Pair with caption and th scope

❌ Don’t

Mix redundant span on colgroup and every col
Expect font-weight on col to always work
Use harsh colors that break text contrast
Skip table headers because columns are colored

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<colgroup>`

Bookmark these before you ship — they’ll keep your table column markup organized and maintainable.

Core concepts

📦 01

Column Groups

<colgroup> groups one or more table columns together.

Foundation

📝 02

Contains col

Child col elements define per-column styling rules.

Essential

🔢 03

span on colgroup

Counts columns when no col children are present.

Reference

📋 04

Early Placement

Goes inside table, after caption and before rows.

Syntax

🎨 05

Style via col

Background and width CSS work best on child col elements.

Styling

🔗 06

Works with caption

Combine with caption and col for full table structure.

Pattern

❓ Frequently Asked Questions

What is the HTML colgroup tag used for?

It groups columns in a table so you can define column-level presentation, usually through child col elements.

What is the difference between colgroup and col?

colgroup is the container; col is the child that styles individual columns inside it.

What does the span attribute on colgroup do?

When there are no col children, span sets how many columns belong to that group.

Where does colgroup go inside a table?

Inside table, after caption (if present) and before thead, tbody, or tr.

Can I style columns without colgroup?

Valid HTML requires col inside colgroup. You can also style th and td with CSS, but colgroup is the semantic column approach.

Group Table Columns

Practice colgroup and col together in the interactive HTML editor.

Try colgroup + col →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML col Tag HTML comment Tag

HTML <colgroup> Tag

What You’ll Learn

Colgroup Syntax

Column Grouping

span Attribute

colgroup vs col

Column Styling

Accessible Tables

What Is the <colgroup> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <colgroup> vs <col>

🧰 Attributes

Examples Gallery

Live Preview

Basic colgroup with col

📚 Common Use Cases

Column Widths

Column Background Colors

colgroup span (No col Children)

Styling <colgroup> and <col> with CSS

♿ Accessibility

🧠 How <colgroup> Works

Author adds colgroup in table

col elements define columns

Browser applies column styles

Organized, styled tables

Universal Browser Support

Column grouping that works everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <colgroup>

Column Groups

Contains col

span on colgroup

Early Placement

Style via col

Works with caption

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <col> Tag

HTML <caption> Tag

HTML Comment Tag

Try colgroup + col

Group Table Columns

About the author

What Is the `<colgroup>` Tag?

⚖️ `<colgroup>` vs `<col>`

Six truths every developer should know about `<colgroup>`