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.

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


To divide a table into structural column groups:

1.

After the table (and caption) tags, type <colgroup.

2.

If the column group has more than one column, type span="n", where n is the number of columns in the group.

3.

If desired, define the attributes for the column group.

4.

Type the final >.

5.

If desired, define individual columns as specified below with col.

6.

Type </colgroup>.

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.


To divide a table into non-structural column groups:

1.

After the table (and caption) tags, type <col.

2.

If the column group has more than one column, type span="n", where n is the number of columns in the group.

3.

If desired, define the attributes for the column group.

4.

Type the final />.

5.

Repeat steps 14 for each column group that you wish to define.

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.


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.





HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net