HTML and CSS Reference
In-Depth Information
6. Insert the following summary for the table:
Lists the morning programs aired by
KPAF from 5:00 a.m. to 12:00 p.m. (central time)
.
7. Add the table header row group containing the headings shown in Figure 5-53.
8. Enter the table body row group containing the times and names of the different KPAF
programs from 5:00 a.m. to 12:00 p.m., Monday through Sunday, in half-hour inter-
vals. Create row- and column-spanning cells to match the layout of the days and
times shown in Figure 5-53.
9. Close the morning.htm fi le, saving your changes.
10. Go to the
programs.css
fi le in your text editor. Create a style rule for the programs
table to: a) set the width of the table to 100%; b) add a 2-pixel solid black border
that is collapsed around the table; and c) set the font family to the following list of
fonts: Arial, Verdana, and sans-serif.
11. Create a style rule to align the table caption with the bottom-left corner of the table.
Set the caption font size to 0.8 em.
12. Create a style rule for all table data cells in the table body of the programs table to:
a) set all table cells to a font size of 0.7 em; b) vertically align the text of all table
data cells with the top of the cell; c) add a 1-pixel solid gray border around every
cell, and d) setting the padding space to 2 pixels.
13. Set the height of all table rows to 25 pixels.
14. Display the header row group in white font with a background color of (105, 177, 60).
15. For table header cells within the header row group, set the font size to 0.7 em and
add a 1-pixel solid gray border. For the fi rst table header cell in the header row
group, set the background color to the value (153, 86, 7). Use the
nth-of-type
pseudo-class to set the background color of the seventh and then the eighth table
header cells in the header row group to the value (153, 0, 153).
16. Add the following style rules for the three column groups in the table: a) set the
width of the timeColumn column group to 10% with a background color of (215,
205, 151); b) set the width of the wDayColumns column group to 11% with a back-
ground color of (236, 255, 211); and c) set the width of the wEndColumns column
group to 17% with a background color of (255, 231, 255).
17. Create a three-column layout for the introductory paragraph within the intro section
with three columns in the layout separated by a gap of 20 pixels with a 1-pixel solid
black divider.
18. Add style comments throughout the style sheet to document your work, and then
save your changes.
19. Open the
morning.htm
fi le in your Web browser and verify that the table layout and
design resemble that shown in Figure 5-53. (Note: If you are using Internet Explorer
or Opera, you will not see the three-column layout for the introductory paragraph.)
20. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
