Tables - Web Development and Design Foundations with XHTML - page 347

Figure 8.34
Services page with
table
You will modify the services page (services.html) to display information in an XHTML
table. You will use CSS to style the table. You have two tasks:
1. Add style rules to the painter.css file that will configure the new table.
2. Modify the services.html file to use a table to display information. Refer to
Figure 8.34.
Hands-On Practice Case
1. Configure the CSS. Modify the external style sheet, painter.css. Review Figure 8.34
and note the services descriptions, which are coded in an XHTML table. Add a
style rule to the painter.css external style sheet that configures a class named
service . The service class has a background color ( #336633 ), text color
( #ffffff ), Verdana or sans-serif font typeface, bold font, font size of .90em,
5 pixels of padding, uppercase text (use text-transform), and a solid, black, 1
pixel bottom border. Save the painter.css file.
2. Modify the Services Page. Edit the services file (services.html) in Notepad. The
names of the services are contained in <h 3 > elements. The descriptions of the
services are contained within <span> tags assigned to the category class. You will
modify the code to display the services information using a table that has eight
rows and one column with each service name and each service description is in its
own row. Each table row ( <tr> tag pair) contains one <td> tag pair. As you code
the table, remove the h3 tags and span tags. Assign the <td> elements that con-
tain the service names to the service class.