HTML and CSS Reference
In-Depth Information
Figure 5-35
Adding the border-collapse style
collapses adjacent borders in
the table into a singl
e border
◗
2.
Save your changes to the style sheet and then reload
schedule.htm
in your Web
browser. Figure 5-36 shows the revised table design with the collapsed borders
layout.
Figure 5-36
Schedule table with collapsed borders
Notice that the browser still uses the purple outset style for the border around the
entire table. This is due to Rule 3 above. Because the border around the entire table is
10 pixels wide, it takes priority over the 1-pixel-wide borders around the individual table
cells under the collapsed borders model.
Applying Styles to Rows and Columns
Kyle doesn't like the appearance of the table text. He suggests changing it to a sans-
serif font that is 0.75 em units in size. He also suggests that the text in the header row
be displayed in a semi-transparent white font on a purple background, and that the fi rst
column of the schedule, which contains the program times, appear on a light yellow
background.
You can apply these styles to the row groups and column groups you created in the last
session. Recall that the header row is part of the
thead
row group (see Figure 5-19), and
that the fi rst column of the table belongs to the
fi rstCol
class of columns (see Figure 5-20).
