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

You'll set the column widths by applying the width property to the two column
groups. The specifi ed widths are then applied to the individual columns within those
groups. The style rules are:

table.schedule col.firstCol {
width: 7%;
}

table.schedule col.dayCols {
width: 13%;
}
Add these styles to the tables.css style sheet.

To set the width of the table columns:

◗

1. Return to the tables.css file in your text editor. Add the following style to the style
rule for the firstCol selector:

width: 7%;

◗

2. Directly below the style rule for the firstCol selector, add the following style
rule to set the widths of the columns in the dayCols class to 13%, as shown in
Figure 5-42:

/* Styles for the remaining columns */

table.schedule col.dayCols {
width: 13%;
}

Figure 5-42 Setting the widths of the schedule table columns

the first colum n is 7%
of the table width

each of the remaining
seven col umns is 13%
of the table width

◗

3. Save your changes to the file and then reload schedule.htm in your Web browser.
Figure 5-43 shows the revised layout of the table.