HTML <col> column Tag Reference

The <col> HTML/xHTML tag

The column tag is used at the start of a table to define a column, allowing certain styles to be applied to every cell in the column.

The really useful thing about  tags is that they let you easily assign the same properties (especially widths) to multiple tables. If you have 2 tables on a page, which contain similar data but in differing amounts, if left to its own devices a web browser will automatically resize columns to make each table as short as possible. What you want is a neat way to make the first column in both tables line up etc. That’s where the <col /> or the multiple column tag <colgroup /> come in. (The colgroup is used to assign the same properties to more than one consecutive column.)

By simply assigning the same columns to each table, you can give each column 1 the same classname, which might fix the width as a set percentage of the table width.

When to use the <col> tag (semantic use)

Use <col /> tags only to assign class or style properties to whole columns in HTML tables.

It’s valid in all current versions of HTML and xHTML, and it’s a self-closing tag, so if you are using xHTML you need to remember the trailing forward-slash />

Example of <col> tag use

See how the column widths in these 2 tables are different, which doesn’t look tidy.

The xHTML markup

The fix, using column tags

The easiest way to align the columns is to use <col /> tags.

The xHTML & CSS markup

Alternatives to the <col> tag

You may also consider using:

<colgroup> tag

Use a colgroup as a shorthand when there are more than 1 consecutive columns sharing the same property.