Web Development and Design Foundations with XHTML, 5th Edition

Web Site Case Study: Using Tables^347

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 serviceclass 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 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 (tag pair) contains one tag pair. As you code
   the table, remove the h3 tags and span tags. Assign the elements that con-
   tain the service names to the service class.

Figure 8.34
Services page with
table