HTML <colgroup> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes
Frequently Asked Questions(FAQ)

INTRODUCTION

The <colgroup> element is used define a group of one or more columns within a table. It can contain one or more <col> elements.

location: The <colgroup> must be written after any <caption> element, but before any <thead>, <tbody>, <tfoot>, and <tr> elements.

Syntax:


<table>
  <caption> // text  </caption>    
  <colgroup>
    <col span="Number" />
  </colgroup>
</table>

Example:


<table>
  <colgroup>
    <col span="1" style="background-color: greenyellow;">
    <col span="2" style="background-color: lightyellow;">
  </colgroup>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>

Output:

Name	Age	Country
Alice	30	USA
Bob	25	UK

ATTRIBUTES

1. span

The span atribute Specifies how many columns in a row the <colgroup> element spans. The value must be a whole number greater than zero, and if it's not set, the default is 1. When span is used, you should not use <col> inside that <colgroup>.

example:: In this example the first <colgroup> element spans 2 columns and second <colgroup> element spans 1 column.


<table border="1">
  <colgroup span="2" style="background-color: lawngreen;"></colgroup>
  <colgroup span="1" style="background-color: lightyellow;"></colgroup>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Name	Age	City
Alice	30	New York
Bob	25	London

Deprecated Attributes

The following attribute are Deprecated and is advised to not use them. They are mentioned just for reference for updating legacy code or for historical interest.

align
bgcolor
char
charoff
valign
width

Usage Guidelines

The col tag can only be used inside a <colgroup> tag, and that <colgroup> must not have a span attribute.
Only a few CSS properties work with <colgroup>, they are background, border, visibility, width. Other properties like font-weight or text-align won't have any effect.

Frequently Asked Questions (FAQ)

What is the use of <colgroup> tag in HTML tables?

The <colgroup> element is used define a group of one or more columns within a table. It can contain one or more <col> elements.

What is the difference between HTML <colgroup> and <col> tags?

The <colgroup> tag groups a set of columns, allowing you to apply common styles or attributes to multiple columns simultaneously. The <col> tag, used within <colgroup>, defines individual columns and can have specific styles or attributes applied to each.

How to apply CSS styles to the <colgroup> tag?

Only a few CSS properties work with <colgroup>, they are background, border, visibility, width. Other properties like font-weight or text-align won't have any effect.

Why text-align doesn't work in HTML colgroup and col element?

The <col> element and <colgroup> is a special case in HTML/CSS. It’s not a content container like <th> or <td>, which hold text or other elements that can be aligned. According to the CSS specification, <col> supports only a subset of CSS properties, including: background (e.g., background-color) border width visibility (e.g., visibility: collapse) display (to some extent, though rarely used) text-align is not included because it applies to the alignment of inline or text content within a block-level element, and <col> does not directly contain such content.

How does HTML colgroup element improve table accessibility?

The HTML colgroup element helps improve table accessibility by making it easier for screen readers and assistive technologies to understand the structure and layout of a table. It groups one or more columns so assistive tech can convey how columns are related or styled. By grouping columns logically, screen readers can provide better context (e.g., “all financial data columns are here”).

Can the rowspan or colspan attributes be used with colgroup element?

No, <colgroup> cannot be used directly with rowspan or colspan. The <colgroup> and <col> elements are used to define and style columns, not table cells. rowspan and colspan are attributes for table cells (<td> or <th>) — not for column or row definitions.

Can multiple colgroup tags be used in a HTML table?

Yes, you can use multiple colgroup tags in a table — but with limitations. Only one colgroup element can be without a span attribute. You can have multiple colgroup elements if each one has a span attribute (or only the last one omits it).

HTML <colgroup> Tag Tutorial - Usage, Syntax,
Attributes and Example

Table of Contents