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

Figure 5-43 Revised table column widths

first c olumn width is
7% of the total width

the seven d ays of the week columns are
each 13% of the total width of the table

Kyle also wants you to increase the heights of the table rows to provide more visual
space for the table contents. Heights are set using the CSS height property. You can
apply heights to entire table rows or to individual table cells. You also can use the height
style to set the height of an entire table. As with the width property, the height property
should be interpreted as the minimum height for these table objects because the browser
will enlarge the table, table row, or table cell if the content requires it.
You decide to set the height of the rows in the table header to 50 pixels and the height
of the rows in the table body to 40 pixels. The styles to do this are as follows:

table.schedule thead tr {
height: 50px;
}

table.schedule tbody tr {
height: 40px;
}
Note that you don't apply the height property to the row groups themselves because
that would set the width of the entire group and not the individual rows within the group.

To set the height of the table rows:

◗

1. Return to the tables.css file in your text editor and add the following styles
directly below the style rule for the table.schedule thead selector, as shown in
Figure 5-44:

table.schedule thead tr {
height: 50px;
}

/* Table body styles */

table.schedule tbody tr {
height: 40px;
}