Colgroup & Col

Colgroup & Col


These table tags were introduced in HTML4. COLGROUP and COL enable you to create structural divisions of table columns. These can later be enhanced using style sheet coding.

Both COLGROUP and COL have two properties:

  • span: defines the number of columns in the column group. This cannot be 0. Default value is 1.
  • width: specifies the width of each column in the column group. This can have a value stated in pixels, percentages, or relative.

Because these tags are dealing with cells, they too can use the same properties as the TD tag such as VALIGN and ALIGN.

The COLGROUP/COL areas are entered after the starting TABLE tag (and after CAPTION if that is being used) and before the first TR tag. COLGROUP has an ending tag like most HTML tag sets.

COL is used to specify specific columns (or groups of columns) within a COLGROUP. It is like a "fine tuning" feature. COL is a single tag similar to IMG or INPUT.

Here is a 4 column regular table. I have used only 1 row to keep these examples to a minimum length :

I will specify all 4 columns as width 150 pixels each using colgroup. The SPAN indicates how many columns are being affected. The WIDTH specifies the pixel width of the columns specified.

Now to get some COL action happening. I will specify the first 3 columns as width 100 pixels and the last column as 300 pixels. Notice the COLGROUP width value specifies the total of the COL width values.

You have probably noticed that the results are very similar to entering the WIDTH property into the individual TD tags. This is true, but using COLGROUP and COL can be a much easier way of doing changes on as a whole instead of going through changing a bunch of TD widths. This way it is all structured at the start of the table. Easy to find, easy to change.

Multiple COLGROUP tags may be used in place of the COL tag. The example above could have used this instead...

You may find it easier one way or the other. Personally, I like to use the COLGROUP tags. You will see when we get into RULES later on. That's it for now on COLGROUP and COL.

Table of Contents

Table Bordercolor