Skip to: content, navigation

by Ian Lloyd

colgroup (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full

Example

This colgroup element is used to set a class for first three columns (which can then be styled with CSS):

<table border="1">
  <colgroup class="vivid">
    <col/>
    <col/>
    <col/>
  </colgroup>
  <colgroup>
    <col/>
  </colgroup>
  <tr>
    <th colspan="4">Work Contact Points</th>
  </tr>
  ⋮
</table>
Type
table element
Contains
col
Contained by
table

Description

The colgroup is a container for a number of col elements, and allows you to set attributes that you might otherwise set at col level on a number of col elements simultaneously—the attributes defined at this higher level apply to all of the child columns. It is important to note that if you use one or more colgroup then all cols must be enclosed in one or more colgroups

Use This For …

This element is used to apply styles (either using HTML attributes or via CSS) to a number of columns simultaneously.

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

This element has reasonable support, though the breadth of support depends heavily on which attributes are applied. Attribute support varies between browsers (it would be so much easier if all browsers tested, supported, and ignored the same set of attributes, but unfortunately, this is not the case).

A better approach is to apply class names to the respective colgroup elements, then let CSS styling take care of alignment, colors, widths, and so on.

In this Section

Related Reading

User-contributed notes

ID:
#2
Date:
Thu, 17 Apr 2008 11:10:41 GMT
Contributed by:
sebwin

To my knowledge, support for this element (and the col element) is virtually non-existant in WebKit (Safari).
And the last time I looked, the most useful attribute, width with values of "*" and "0*", was only properly support in Firefox.
The compatibility table should really be corrected!

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters