HTML and CSS Reference
In-Depth Information
Figure 5-44
Setting the height of the table rows
height of the r
o
w
within the table
header
heights of the r
ows
within the table body
◗
2.
Save your changes to the file and then reload
schedule.htm
in your Web browser.
Verify that the heights in the table header and table body have changed.
With the increased row height, Kyle would like all of the program names in the
schedule to be vertically aligned with the tops of the cell borders as you did earlier with
the
valign
HTML attribute. The equivalent CSS style is the
vertical-align
property
introduced in Tutorial 3. Kyle also wants to increase the padding within each cell to add
more space between the program names and the cell border. You'll add styles to do this.
To place the program names at the top of each table cell:
◗
1.
Return to the
tables.css
file in your text editor and add the following style rule, as
shown in Figure 5-45:
table.schedule tbody td {
padding: 5px;
vertical-align: top;
}
Figure 5-45
Vertically aligning the table data cells in the table body
◗
2.
Save your changes to the file, and then reload
schedule.htm
in your Web
browser. As shown in Figure 5-46, the program names now are placed at the top
of each cell, and the padding space between the program names and the cell
borders has been increased.
