Web Development and Design Foundations with XHTML, 5th Edition

(^334) Chapter 8 Tables
HANDS-ON PRACTICE 8.4
In this Hands-On Practice you will code CSS style rules to configure an informational
table on a Web page. Create a new folder named trilliumtableCSS. Copy the following
files from the Chapter8/starters folder to your trilliumtableCSS folder: myservices.html,
trilliumbanner.jpg, and trilliumbullet.gif files. We’ll use embedded styles for ease of edit-
ing and testing your page. Display the myservices.html file in a browser; the file should
look similar to the one shown in Figure 8.17. Launch Notepad or another text editor
and open the myservices.html file from your trilliumtableCSS folder. Locate the opening

tag as follows:
cellspacing="0" summary="A description of the Web site design,
interactive animation, e-commerce solution, and usability study
services provided by Trillium Media Design. Each row explains a
service with the name of the service in the first column and the
description of the service in the second column.">
Notice the attributes that configure the border, width, alignment, cellpadding, and
cellspacingof the table. Delete these attributes from the tag. You will code
CSS to replace the functionality of these attributes.

1. Configure the tableselector. Locate the embedded styles in the header section of
   the Web page. Add a style rule for the tableselector in this area that configures
   the table to be centered, have a border, and a width of 75%.
   table { border: 1px solid #5c743d;
   width: 75%;
   margin: auto; }
   Save the file and display your page in a browser. The table area will look similar
   to the one shown in Figure 8.27. Notice that this configures a border surrounding
   the entire table but not surrounding each table cell.

Figure 8.27
The border outlines
the table

2. Configure the tdand thselectors. Add a style rule that configures a border and
   padding.
   td, th { border: 1px solid #5c743d;
   padding: 5px; }
   Save the file and display your page in a browser. The table area should look similar
   to the one shown in Figure 8.28. Each table cell is now outlined with a border.