HTML Syntax

<colgroup span=columns_count>
   <col ... >
</colgroup>

The <colgroup> element represents a group of one or more columns in a <table> element.

The number of columns in the group may be specified in either of two ways:

• using the colgroup element’s span attribute.
• using individual <col> elements within the group.

NOTE: The span attribute is not permitted if there are one or more col elements within the group.

The advantage of using the span attribute is that authors can apply style information to entire columns, instead of repeating styles for each cell in each row.

For example, if a table contains ten columns, all of which we intend to apply a width of 20 pixels, it is easier to write:

<colgroup span="10" style="width:20px"></colgroup>

than:

<colgroup>
   <col style="width:20px">
   <col style="width:20px">
   ... a total of ten col elements ...
</colgroup>

When it is necessary to single out a column ( e.g., for style information, to specify width information, etc. ) within a group, authors must identify that column using a col element of its own.

Thus, to apply special style information to the last column of the previous table, we single it out as follows:

<colgroup style="width:20px">
   <col span="9">
   <col id="diffCol">
</colgroup>

The style attribute of the colgroup element is inherited by all columns in the group. The first col element refers to the first 9 columns ( doing nothing special to them ) and the second one assigns an id value to the tenth column so that a different style rule may be applied to it.

The colgroup element greatly simplifies the application of various column group attributes. In previous HTML versions, if authors wanted to apply an attribute to an entire column, such as width, span, alignment or style, the attribute had to be coded for each and every cell in the column.

This was not only inefficient as it was cumbersome, but takes longer for browsers to parse cell rendering instructions, and adds to file size as well, especially with larger tables, hence decreasing overall download speed.

A colgroup element’s start tag can be omitted if the first thing inside the colgroup element is a <col> element, and if the element is not immediately preceded by another <colgroup> element whose end tag has been omitted.

A colgroup element’s end tag can be omitted if the colgroup element is not immediately followed by whitespace or a comment.

The following example shows how the colgroup element may be used.

<table border width=90% cellpadding=3>
<colgroup>
   <col span=2>
   <col style="background-color: eed">
</colgroup>
<tbody>
<tr>
   <td>This col is in the first group.</td>
   <td>This col is in the first group.</td>
   <td>This col is in the second group.</td></tr>
</table>

which would render on a Web page as

• 4.9.3 The colgroup element

COL