HTML and CSS Reference
In-Depth Information
column group that contains one column. If the
<colgroup>
element contains one or
more
<col>
elements (described later), however, the
span
attribute is ignored.
width
specifies the width of each column in the column group. Widths can be
defined in pixels, percentages, and relative values. You also can specify a special
width value of
“0*”
(zero followed by an asterisk). This value specifies that the
width of each column in the group should be the minimum amount necessary to
hold the contents of each cell in the column. If you specify the
“0*”
value, how-
ever, browsers will be unable to render the table incrementally (meaning that all
the markup for the table will have to be downloaded before the browser can start
displaying it).
n
Suppose that you have a table that measures 450 pixels in width and contains six
columns. You want each of the six columns to be 75 pixels wide. The code looks some-
thing like the following:
10
<table border=“1” width=“450”>
<colgroup span=“6” width=“75”>
</colgroup>
Now you want to change the columns. Using the same 450-pixel-wide table, you make
the first two columns 25 pixels wide, and the last four columns 100 pixels wide. This
requires two
<colgroup>
elements, as follows:
<table border=“1” width=“450”>
<colgroup span=“2” width=“25”>
</colgroup>
<colgroup span=“4” width=“100”>
</colgroup>
What if you don't want all the columns in a column group to be the same width or have
the same appearance? That's where the
<col>
element comes into play. Whereas
<col-
group>
defines the structure of table columns,
<col>
defines their attributes. To use this
element, begin the column definition with a
<col>
tag. The end tag is forbidden in this
case. Instead, use the XHTML 1.0 construct for tags with no closing tag and write the
tag as
<col />
.
Going back to your 450-pixel-wide table, you now want to make the two columns in the
first column group 75 pixels wide. In the second column group, you have columns of 50,
75, 75, and 100 pixels, respectively. Here's how you format the second column group
with the
<col>
tag:
