| Home Web | Top Bottom | Contents Prev Next |
<colgroup> and <col>
The <col> Tag
The <colgroup> Tag
Where to Place <colgroup> and <col>
Example
Similar to <thead>, <tfoot> and <tbody>, <colgroup> and <col> let you divide the columns of the tables into groups. They also let you apply align and valign to an entire column. For example, if you have a 2-column table and if you want to have all the cells in the left column use align="right" but all the cells in the right column use align="center", you can specify this in <col> tags. Without using <col>, you'd have to include align in all of the <td> cells, so this can save a lot of effort.
Unfortunately, Netscape 4 does not support <col> and <colgroup>. If you want your formatting to apply to Netscape 4 and to older browsers, you're stuck with the old, clumsy method.
Also unfortunately, Netscape 6 seems to recognize the widths you specify in <col> and <colgroup>, but ignores align and valign and these tags.
IE lets you specify a background color for a column in either <col> or <colgroup>, and the color is applied to all of the cells in the column(s). This can be done either via the CSS background or background-color property, or via the bgcolor attribute in <col> or <colgroup>. Unfortunately, this is proprietary and is not part of the HTML 4.0 standard, and Netscape 6 does not support it.
<col> and <colgroup> also let you specify the width of each column. The width can be specified as a fixed number of pixels or as a percentage of the table's width. It only makes sense to specify a percentage if you've specified a width for the table in the <table> tag — otherwise, the table's width is not known, so a percentage makes no sense. The width can also be specified as a number followed by an *: 3*, for example. A column whose width is specified as 3* will be three times as wide as one specified as 1*.
The purpose of the <col> tag is to provide characteristics for cells in the column. <col> does not divide columns into groups; only <colgroup> does that.
Within <col>, you can use width to specify a columns's width. You can include align and valign to provide default alignments for the cells in the column. In IE only, you can include bgcolor to provide a default background color for the cells in the column(s).
If two or more adjacent columns have identical characteristics, you can include span to indicate the number of adjacent columns that are identical. span defaults to 1.
Let's take an example. Suppose you have a 3-column table. You want the first two columns to 100 pixels wide and to use align="center", while you want the third column to be 200 pixels wide and to use align="right". You can specify this with two <col> tags:
HTML: <col span="2" width="100" align="center">
<col width="200" align="right">
XHTML: <col span="2" width="100" align="center" />
<col width="200" align="right" />
(The XHTML format works in both HTML and XHTML,
but is not accepted by the HTML validator.)
The span="2" in the first <col> tag indicates that two identical columns are being defined. This does NOT mean that the two columns form a column group, just that they have identical characteristics.
Note that <col> is an empty tag. You don't need to use a </col> tag — but you do need to end it with /> in XHTML.
The purpose of the <colgroup> tag is to divide the columns into "groups." When we talk about frames and rules, you'll see a reason why you might want to do this.
Use the span attribute to identify how many columns are in a group. span defaults to span="1". You can specify width, align and valign (and, in IE only, <bgcolor>) to indicate default values for the cells in the columns.
According to the HTML 4.0 standard, you do not need to include <col> tags within a <colgroup> if you don't need to specify any overriding attributes. However, IE doesn't like this. Define all of the columns with <col> even when you use <colgroup>.
Unlike <col>, <colgroup> is not an empty tag since it can include <col> tags. The ending </colgroup> tag is optional in HTML, but is required in XHTML.
Let's look at an example. We'll plan a 5-column table with the left three columns in one group and the right two columns in another. All of the columns in the first group are identical: each is 100 pixels wide and have align="right". The columns in the second group have equal widths of 50 pixels, but one has align="left" while the other has align="center"
<colgroup span="3" width="100" align="right"> <col span="3"> </colgroup> <colgroup span="2" width="50"> <col> <col align="center"> </colgroup>
All of the columns in the first group are identical and are covered by the attributes specified in <colgroup>, so we just include a single <col> tag to satisfy IE. In the second group, we wanted to specify align="center" for the second column. We've include a <col> tag for the first column in the group so the browser would understand that we want the align="center" to apply to the second column.
Place the <colgroup> and/or <col> tags immediately after the <caption> tag if there is one. Otherwise, place them immediately after the <table> tag. The table data (<tr>, <thead>, <tfoot> and <tbody>) must be placed after the <colgroup> and <col> tags.
Here's a table that includes two column groups and five columns. CSS is used to set the attributes of the columns and groups.
If you have Netscape 4 (or another browser that doesn't recognize the column tags), notice that the table is formatted just as if you had omitted the <colgroup> and <col> tags.
If you have Netscape 6, notice that the background colors and text alignments are ignored.
IE supports all of the formatting as shown in this IE 5 screen shot:
Netscape 6 only applies the width information:
Netscape 4 doesn't pick up any of the column information:
| Home Web | Top Bottom | Contents Prev Next |