HTML <colgroup> tag

The <col> tag is used to set properties for a column group. This is useful in tables when you want to set a similar style to all of the cells in a table row but don't want to repeat the same style for each cell individually.

NOTE: The <colgroup> tag should come right after the <table> tag.

Attributes

Attribute	Possible values	Description
align	left, center, right, justify, char	Sets the horizontal alignment of content inside a column group
char	theCharacter	Specifies a character within a column group to which the content will be aligned
charoff	numCharacters	Specifies the number of characters the content will be aligned from the character set with the char attribute
span	numColumns	Specifies how many columns in a column group to set properties for.
valign	top, middle, bottom, baseline	Sets the vertical alignment of content inside a column group
width	numericValue OR % of sorrounding element	Sets the width of a column group

NOTE: Some of the attributes of the <colgroup> tag have bad browser support. The align and valign attributes - supported only by Internet Explorer and Opera. The char and charoff attributes - not supported by any of the major browsers.

Standard attributes

class, dir, id, lang, style, title, xml:lang

For more information on standard attributes, check out our HTML standard attributes reference page.

Event attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For more information on event attributes, check out our HTML event attributes reference page.

NOTE: Only the span and width attributes of the <colgroup> tag are supported by Firefox, Chrome, and Safari.

Example

<table border="2" cellspacing="5" cellpadding="2"> <colgroup width="30%" align="left"></colgroup> <colgroup width="70%" align="left"></colgroup> <tr> <th>Subject</th> <th>Description</th> </tr> <tr> <td>Math</td> <td>Learn about things like squares and formulas</td> </tr> <tr> <td>Literature</td> <td>Read and analyze characters, settings, and much more</td> </tr> <tr> <td>Computer Science</td> <td>Find out how to tweak those crazy computers!</td> </tr> </table>

Output:

Subject	Description
Math	Learn about things like squares and formulas
Literature	Read and analyze characters, settings, and much more
Computer Science	Find out how to tweak those crazy computers!

The way the <colgroup> tag works is on a first-come first-serve basis. The first <colgroup> tag will affect the first column, the second <colgroup> tag will affect the second column, and so on.

Tips & notes

If you use the <colgroup> tag to apply a common style to an entire column group but there is one or more columns for which you want to give a different style then use the <col> tag to affect those individual columns. Learn more about the <col> tag at our HTML col tag reference page.

Use CSS to set styles for column groups.