HTML and CSS Reference
In-Depth Information
The browser applies any style specifi ed for the
col
element to cells within the cor-
responding column in the Web table. Thus, to style these three columns with different
background colors, you could apply the following style rules:
col.column1 {background-color: red;}
col.column2 {background-color: blue;}
col.column3 {background-color: yellow;}
In this example, browsers would display the fi rst table column with a background
color of red, the second with blue, and the third with yellow. Note that not all CSS styles
can be applied to table columns. You'll explore column styles in more detail in the next
session.
The
col
element also supports the
span
attribute, allowing a column reference to
cover several table columns. The syntax of the
span
attribute is
<col span=”
value
” />
where
value
is the number of columns spanned by the
col
element. Thus, the column
structure
<colgroup>
<col class=”column1” />
<col class=”nextColumns” span=”2” />
</colgroup>
references a group of three columns; the fi rst column belongs to the
column1
class and
the next two columns belong to the
nextColumns
class. Note that you also can apply the
span attribute to a column group itself. The following code uses two column groups to
also reference three columns, the fi rst belonging to the
column1
class and the last two
belonging to the
nextColumns
class:
<colgroup class=”column1”></colgroup>
<colgroup class=”nextColumns” span=”2”></colgroup>
Notice that in this case there are no
col
elements within the column group. Browsers
will assume the number of columns indicated by the
span
attribute; if no
span
attribute
is present, a column group is assumed to have only one column.
The total number of
columns spanned by the
col
elements must match
the total number of col-
umns in the Web table.
Creating Column Groups
• To create a column group, add the element
<colgroup>
columns
</colgroup>
to the Web table, where
columns
are
col
elements representing individual columns
within the group.
• To define a column or columns within a column group, use the
col
element
<col span=”
value
” />
where
value
is the number of defined columns. The
span
attribute is not required if
only one column is defined.
