Dividing Your Table into Column Groups

When using tables for displaying tabular data (their classic purpose), you can divide your table into two kinds of column groups: structural and non-structural. The former control where dividing lines, or rules, are drawn (see page 250). The latter do not. Both let you apply formatting to an entire column (or groups of columns) of cells all at once.

Tips

You can only legally apply background, border, width and visibility properties to colgroup and col elements, though IE accepts other formatting as well. The border property is only applied if you set the table's border-collapse property to collapse.
Use colgroup when you want to determine where dividing lines (rules) should go. Use col for everything but deciding where dividing lines go. For more information on drawing dividing lines, consult page 250.

Figure 16.53. We'll add a background color to the new col element.
You can divide column groups (colgroup) into columns (col) in order to add non-structural information (like size, alignment, or whatever) to individual columns within structural column groups. Simply type the col tag after the parent colgroup tag (Figure 16.52). Note that col tags' attributes override the attributes in the colgroup tag.

Figure 16.52. Now I divide the second column group into two separate non-structural column groups (with col) so that I can format an entire column at a time without affecting how rules are drawn (see page 249).

Figure 16.54. Now the Total column has its own background color.
If a column group is not divided into individual columns, you may combine the opening and closing tags: <colgroup span="3" />. In HTML, the closing tag for colgroup is optional.
The col element is always empty. In HTML you may omit the /.
If the column group only contains one column, you don't need to use the span attribute. Its default is 1.
Header cellsthose marked with the th tagare not affected by the alignment specified in a column group. For more information on aligning cells, consult Aligning a Cell's Contents on page 238.

Dividing Your Table into Column Groups

Figure 16.49. The first `colgroup` contains the city names, the second is for the table data.

Figure 16.50. Apart from basic CSS formatting that we've discussed earlier, I also apply background colors to the cities and data classes. You can only apply `background`, `border`, `width`, and `visible` properties to `colgroup` elements.

Figure 16.51. The `colgroup` element makes it easy to select all of the cells in a column and apply formatting to them in one fell swoop. Here we've applied a background color to each `colgroup` element.

Figure 16.53. We'll add a background color to the new `col` element.

Figure 16.52. Now I divide the second column group into two separate non-structural column groups (with `col`) so that I can format an entire column at a time without affecting how rules are drawn (see page 249).

Figure 16.54. Now the Total column has its own background color.

Dividing Your Table into Column Groups

Figure 16.49. The first colgroup contains the city names, the second is for the table data.

Figure 16.50. Apart from basic CSS formatting that we've discussed earlier, I also apply background colors to the cities and data classes. You can only apply background, border, width, and visible properties to colgroup elements.

Figure 16.51. The colgroup element makes it easy to select all of the cells in a column and apply formatting to them in one fell swoop. Here we've applied a background color to each colgroup element.

Figure 16.53. We'll add a background color to the new col element.

Figure 16.52. Now I divide the second column group into two separate non-structural column groups (with col) so that I can format an entire column at a time without affecting how rules are drawn (see page 249).

Figure 16.54. Now the Total column has its own background color.

Figure 16.49. The first `colgroup` contains the city names, the second is for the table data.

Figure 16.50. Apart from basic CSS formatting that we've discussed earlier, I also apply background colors to the cities and data classes. You can only apply `background`, `border`, `width`, and `visible` properties to `colgroup` elements.

Figure 16.51. The `colgroup` element makes it easy to select all of the cells in a column and apply formatting to them in one fell swoop. Here we've applied a background color to each `colgroup` element.

Figure 16.53. We'll add a background color to the new `col` element.

Figure 16.52. Now I divide the second column group into two separate non-structural column groups (with `col`) so that I can format an entire column at a time without affecting how rules are drawn (see page 249).