HTML and CSS Reference
In-Depth Information
#quantities {
width: 200px;
}
#prices {
background: #ddd;
}
The output of the CSS in Listing 7-24 is shown in Figure 7-12.
Figure 7-12.
The quantities column and the prices column are both styled uniquely
In this example, the
#quantities
column is set to 200 pixels in width and the cells in the
#prices
column
are set to have a background color of
#ddd
. Note, though, that the cells in the
thead
and
tfoot
portion of
the table retain their background color of
#eee
. This is due to the influence of
table layer stacking
.
As it pertains to determining a table cell's background color, there are six layers of stacking. Assume for a
moment that each of the following six layers has a unique background color specified on one of its
elements:
The lowest layer, the
table
element itself, is superseded by column groups;
1.
2.
Column groups, in turn, are superseded by columns;
3.
Columns lose out to row groups;
4.
Row groups bow down before individual rows; and finally,
5.
Cells are king of the mountain.
In the example code, cells—in this case, headings in the header and cells in the footer—beat out the
background color declaration on the column. This is one rare case where CSS specificity takes a back
seat to stack order. The column's ID selector
should
overpower the cell's generic element selector, but the
table layer model tells the browser to give preference to stacking order over specificity.
For a detailed explanation of the table layer model, including a handy diagram, see the
section on “Table Layers and Transparency” available on the W3C's website at
w3.org/TR/CSS21/tables.html#table-layers.
