Working with Tables and Columns - HTML, CSS, and Dynamic HTML - page 359

Thus, to apply Kyle's suggested styles, you could add the following declarations to the
tables.css style sheet:

table.schedule {
font-family: Arial, Helvetica, sans- serif;
font-size: 0.75em;
}

table.schedule thead {
background-color: rgb(203, 50, 203);
color: white;
color: rgba(255, 255, 255, 0.5);
}

table.schedule col.firstCol {
background-color: rgb(255, 255, 192);
}
However, you notice a contradiction between these styles. The fi rst cell in the sched-
ule table belongs to both the header row and the fi rst column. Will this cell have a
purple background or a yellow background? Which style has precedence? Table objects,
like other parts of CSS, have levels of precedence in which the more specifi c object takes
priority over the more general. Figure 5-37 shows a diagram of the different levels of
precedence in the Web table structure.

Figure 5-37 Levels of precedence in Web table styles

table cells highest

precedence

rows

row groups

columns

column groups

table

lowest
precedence

The most general styles are those applied to the entire table. Those styles are overruled
by styles that are applied to column groups and then to columns. The next level up in
precedence contains those styles applied to row groups and then to rows. The highest
level of precedence is given to those styles applied to table cells. Be aware that not all
style properties are supported by different layers of the table structure. In particular, col-
umns and column groups accept only four CSS style properties: border , background ,
width , and visibility . If you want to apply a different CSS style property, you have to
apply it to the cells within those columns.