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

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
<table> tag as follows:
<table border="1" width="75%" align="center" cellpadding="5"
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
cellspacing of the table. Delete these attributes from the <table> tag. You will code
CSS to replace the functionality of these attributes.
1. Configure the table selector. Locate the embedded styles in the header section of
the Web page. Add a style rule for the table selector 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 td and th selectors. 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.