Written by Ben Hunt from web design agency Scratchmedia. For more information about his agency visit scratchmedia.co.uk

 

HTML <col> column Tag Reference

Back to index of HTML/xHTML tags grouped by: « Family / « Importance / « A-Z

The col HTML tag means column, and it is used to apply certain styles to a whole column in a table.

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.

Wombles
Name Favourite pudding Golf handicap
Great Uncle Bulgaria Crème brulée 2
Madame Cholet Apple tart 5
Tomsk Chocolate muffin 14
Flumps
Name Favourite pudding Golf handicap
Pootle Rhubarb and custard, with cinnamon (Doesn't play golf)
Mrs. Flump Anything with vanilla 4

The xHTML markup

<table style="width:30em;">
<caption>Wombles</caption>
<thead>
<tr>
<th>Name</th>
<th>Favourite pudding</th>
<th>Golf handicap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Great Uncle Bulgaria</td>
<td>Cr&egrave;me brul&eacute;e</td>
<td>2</td>
</tr>
<tr>
<td>Madame Cholet</td>
<td>Apple tart</td>
<td>5</td>
</tr>
<tr>
<td>Tomsk</td>
<td>Chocolate muffin</td>
<td>14</td>
</tr>
</tbody>
</table>

<table style="width:30em;">
<caption>Flumps</caption>
<thead>
<tr>
<th>Name</th>
<th>Favourite pudding</th>
<th>Golf handicap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pootle</td>
<td>Rhubarb and custard, with cinnamon</td>
<td>(Doesn't play golf)</td>
</tr>
<tr>
<td>Mrs. Flump</td>
<td>Anything with vanilla</td>
<td>4</td>
</tr>
</tbody>
</table>

The fix, using column tags

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

Wombles
Name Favourite pudding Golf handicap
Great Uncle Bulgaria Crème brulée 2
Madame Cholet Apple tart 5
Tomsk Chocolate muffin 14
Flumps
Name Favourite pudding Golf handicap
Pootle Rhubarb and custard, with cinnamon (Doesn't play golf)
Mrs. Flump Anything with vanilla 4

The xHTML & CSS markup

<style type="text/css">
.col1 {width:25%;}
.col2 {width:45%;}
.col3 {width:30%;}
</style>

<table style="width:30em;">
<caption>Wombles</caption>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<thead>
<tr>
<th>Name</th>
<th>Favourite pudding</th>
<th>Golf handicap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Great Uncle Bulgaria</td>
<td>Cr&egrave;me brul&eacute;e</td>
<td>2</td>
</tr>
<tr>
<td>Madame Cholet</td>
<td>Apple tart</td>
<td>5</td>
</tr>
<tr>
<td>Tomsk</td>
<td>Chocolate muffin</td>
<td>14</td>
</tr>
</tbody>
</table>

<table style="width:30em;">
<caption>Flumps</caption>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<thead>
<tr>
<th>Name</th>
<th>Favourite pudding</th>
<th>Golf handicap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pootle</td>
<td>Rhubarb and custard, with cinnamon</td>
<td>(Doesn't play golf)</td>
</tr>
<tr>
<td>Mrs. Flump</td>
<td>Anything with vanilla</td>
<td>4</td>
</tr>
</tbody>
</table>

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.

Read offline

Buy ebooks safely with PayPalBuy sections of this site as downloadable PDF ebooks now