HTML <col> Tag

Q: What is the HTML col tag used for?

The col element defines default presentation for one or more columns in a table. It must be placed inside colgroup and is commonly used for column background colors and widths.

Q: Must col be inside colgroup?

Yes. In valid HTML, col elements belong inside a colgroup element, which itself is a child of table.

Q: What does the span attribute on col do?

The span attribute specifies how many adjacent columns the col element affects. span="2" applies the same column rule to the next two columns.

Q: Is the width attribute on col still recommended?

No. The width attribute is obsolete in HTML5. Use CSS width on col with table-layout: fixed for modern column sizing.

Q: What is the difference between col and colgroup?

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

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Tables

HTML col tag tutorial — table column styling with colgroup

Overview

What You’ll Learn

By the end of this tutorial, you’ll style table columns efficiently with <col> inside <colgroup>.

Col Syntax

Place <col> inside <colgroup> within a table.

Column Styling

Apply background colors and widths to entire columns at once.

span Attribute

Style multiple adjacent columns with a single col rule.

col vs colgroup

Understand the container and child relationship.

CSS Width

Replace the obsolete HTML width attribute with CSS.

Accessible Tables

Pair column styling with caption and proper headers.

Fundamentals

What Is the `<col>` Tag?

The col element (<col>) specifies column-level presentation for an HTML table. Each col maps to one or more vertical columns, letting you style them from a single place in the markup.

💡

Must live inside colgroup

Valid HTML requires <col> elements as children of <colgroup>, which sits inside <table>.

Common uses include zebra-stripe columns, highlighting totals columns, setting consistent widths, and applying column backgrounds in reports and dashboards.

Foundation

📝 Syntax

Place <col> elements inside <colgroup>, which goes inside <table>:

syntax.html

<table>
  <colgroup>
    <col span="2" style="background:#f8fafc">
    <col style="background:#eff6ff">
  </colgroup>
  <thead>
    <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

Syntax Rules

<col> is a void element—no closing tag in HTML5.
Place it inside colgroup, after caption and before thead/tbody.
Use span to apply one rule to multiple adjacent columns.
Style with CSS on col—not the obsolete HTML width attribute.

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Result
Single column	`<col style="background:#f1f5f9">`	One column styled
Multiple columns	`<col span="2" style="...">`	Two adjacent columns share the rule
Column width	`<col style="width:40%">`	Use with `table-layout: fixed`
Parent element	`<colgroup><col></colgroup>`	Required valid structure
Obsolete width	`width="100"` on col	Do not use—use CSS
Tag-specific attrs	`span`	Plus global attributes

Comparison

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

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 attribute	Supported on colgroup too	Most common on col
Learn next	Groups multiple cols	Individual column rules

Reference

🧰 Attributes

Important <col> attributes for beginners:

span Tag-specific

Number of adjacent columns this col element affects.

span="2"

class Global

CSS hook for column background, width, and visibility.

class="col-total"

style Global

Inline CSS for background-color and width on the column.

style="background:#eff6ff"

width Obsolete

HTML width attribute is obsolete—use CSS width instead.

/* use CSS */

Element type Void

No closing tag in HTML5; self-closing in XHTML.

<col>

Parent Required

Must be a child of colgroup inside table.

<colgroup><col>

Use CSS width on col with table-layout: fixed on the table for predictable column sizing.

Hands-On

Examples Gallery

Column backgrounds, widths, and span rules with copy-ready code and live table previews.

Live Preview

A three-column table with different column backgrounds:

Name	Score	Grade
Alex	92	A

Basic colgroup and col

A valid structure with colgroup and two col rules—one using span.

basic-col.html

<table>
  <colgroup>
    <col span="2" style="background:#f8fafc">
    <col style="background:#eff6ff">
  </colgroup>
  <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

Try It Yourself

Col 1	Col 2	Col 3
A	B	C

📚 Common Use Cases

Use <col> to zebra-stripe columns, highlight totals columns, set consistent widths, or apply column backgrounds in reports and dashboards.

Column Background Colors

Give each column its own background with one col per column.

column-colors.html

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

Try It Yourself

Product	Stock
Apples	42

Column Width with CSS

Set column widths using CSS on col and table-layout: fixed on the table.

column-width.css

table {
  table-layout: fixed;
  width: 100%;
}
col:nth-child(1) { width: 30%; }
col:nth-child(2) { width: 70%; }

Try It Yourself

ID	Description
001	Monthly sales report

span Attribute

Apply one col rule to multiple adjacent columns with span.

col-span.html

<colgroup>
  <col span="3" style="background:#f0fdf4">
  <col style="background:#fef2f2">
</colgroup>

Try It Yourself

Q1	Q2	Q3	Total
10	12	15	37

Design

Styling <col> with CSS

Apply column backgrounds and widths through CSS on col elements:

background Column highlight

width Fixed proportions

span Multi-column rule

table-layout Fixed table layout

col-styles.css

/* Column background colors */
col.highlight {
  background: #eff6ff;
}

/* Column widths with fixed layout */
table {
  table-layout: fixed;
  width: 100%;
}

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

Live styled column table

SKU	Product Name
A12	Wireless keyboard

A11y

♿ Accessibility

Column styling supports readable tables, but accessibility depends on structure:

Use th and scope — col styling does not replace proper headers.
Do not rely on color alone — pair column highlights with clear labels.
Add caption — describe what the table shows.
Keep contrast sufficient — background colors must keep text readable.

🧠 How <col> Works

Author adds colgroup and col

Define column rules before table body rows.

Markup

Browser maps cols to columns

Each col applies to one or more vertical columns via span.

Layout

Column styles cascade to cells

Background and width affect every cell in that column.

Rendering

Cleaner table styling

Style entire columns from one place instead of repeating classes on every td.

Compatibility

Universal Browser Support

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

✓ Baseline · Since HTML 4

Column styling that works everywhere

From legacy Internet Explorer to the latest mobile browsers — the col element is fully supported for column-level table presentation.

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

<col> tag 100% supported

Bottom line: Ship styled data tables with confidence. The <col> element is safe to use in every production environment today.

Wrap Up

Conclusion

The <col> tag helps you style table columns efficiently. Always place it inside <colgroup>, use span for multi-column rules, and prefer CSS over the obsolete width attribute.

Pair column styling with accessible table structure—caption, proper th headers, and sufficient color contrast.

View Examples Gallery Try colgroup + col

Pro Tips

💡 Best Practices

✅ Do

Wrap col elements in colgroup
Use span to style multiple columns at once
Set widths with CSS and table-layout: fixed
Pair tables with caption and proper th headers

❌ Don’t

Put col directly inside table without colgroup
Rely on the obsolete width HTML attribute
Use column color as the only way to convey meaning
Forget that cell-level CSS can override col styles

Summary

Key Takeaways

Knowledge Unlocked

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

Bookmark these before you ship — they’ll keep your table columns clean and maintainable.

Core concepts

📊 01

Column Styling

<col> applies default styles to entire table columns.

Foundation

📦 02

Inside colgroup

Must live inside colgroup as a valid child of table.

Essential

📝 03

span Attribute

One col rule can affect multiple adjacent columns.

Reference

⚡ 04

Void Element

No closing tag in HTML5—self-closing in XHTML.

Syntax

🛠 05

CSS Width

Use CSS width, not the obsolete HTML width attribute.

Styling

🔗 06

Works with caption

Combine with caption and colgroup for full table structure.

Pattern

❓ Frequently Asked Questions

What is the HTML col tag used for?

It defines default presentation for one or more columns in a table, such as background color or width.

Must col be inside colgroup?

Yes. Valid HTML requires col elements to be children of colgroup.

What does the span attribute on col do?

It sets how many adjacent columns the col element applies to. span="3" styles the next three columns.

Is the width attribute on col still recommended?

No. It is obsolete. Use CSS width on col with table-layout: fixed.

What is the difference between col and colgroup?

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

Style Table Columns

Practice colgroup, col, and the span attribute in the interactive 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 code Tag HTML colgroup Tag

HTML <col> Tag

What You’ll Learn

Col Syntax

Column Styling

span Attribute

col vs colgroup

CSS Width

Accessible Tables

What Is the <col> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <col> vs <colgroup>

🧰 Attributes

Examples Gallery

Live Preview

Basic colgroup and col

📚 Common Use Cases

Column Background Colors

Column Width with CSS

span Attribute

Styling <col> with CSS

♿ Accessibility

🧠 How <col> Works

Author adds colgroup and col

Browser maps cols to columns

Column styles cascade to cells

Cleaner table styling

Universal Browser Support

Column styling that works everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <col>

Column Styling

Inside colgroup

span Attribute

Void Element

CSS Width

Works with caption

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <colgroup> Tag

HTML <caption> Tag

CSS Tables

Try span attribute

Style Table Columns

About the author

What Is the `<col>` Tag?

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

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