HTML and CSS Reference
In-Depth Information
19. As with the table header row group, add background graphic images to the
corners of the footer. Use the
first-of-type
pseudo-class to add the image
fi le
bottomleft.jpg
as the background image for the fi rst data cell in the table
footer row group, set along the bottom-left corner without tiling. Use the
last-of-type
pseudo-class to add the image fi le
bottomright.jpg
as the back-
ground image of the last data cell in the table footer row group, positioning it along
the bottom-right corner of that cell without tiling.
20. Create a style rule for the table rows within the table body row group that: a) sets the
height of each row to 50 pixels; and b) adds a 1-pixel dotted gray bottom border.
21. As with the table header and table footer row groups, create a graphic border for the
fi rst and last cells in each row of the table body row group. Use the
first-of-type
pseudo-class to display the image fi le
left.jpg
as the background image for the fi rst
data cell in each row, positioned at the top-left corner and tiled vertically. Use the
last-of-type
pseudo-class to display the image fi le
right.jpg
as the background
image for the last data cell, positioned along the top-right corner of the cell and tiled
vertically. In addition, for the last data cell in every row of the table body row group,
right-align the cell contents.
22. Olivia would like the table to display semi-transparent banded rows. Use the
nth-of-type
pseudo-class to display every even row in the body section with the
background color (152, 228, 215) at 60% opacity. In the same way, display every
odd row in the body section with the background color (255, 255, 255) at 60%
opacity.
23. Set the width of the
firstColumn
column group to 22% of the table width. Set the
width of the columns in the
middleColumns
column group to 28% of the table
width. Finally, set the width of the
lastColumn
column group to 22% of the width
of the table.
24. Add style comments to document your work.
25. Save your changes to the fi le and then open
dhome.htm
in your Web browser.
Verify that the appearance of the product information table matches that shown in
Figure 5-56. (Note: If you are using earlier versions of the major browsers, you will
not see the semi-transparent effect in the rows and in the table background, nor will
you see rounded graphic corners and edges.)
26. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
