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

Hands-On Practice Case
1. Configure the CSS. Modify the external style sheet, prime.css. Review Figure 8.35
and note the property listing information, which is coded in two XHTML tables.
Add style rules to the prime.css external style sheet to configure the following:
a. A table with a background color ( #ffffff ) and 5 pixels of padding
b. A th selector with left-aligned text in a green color ( #006600 )
c. A td selector that is aligned vertically to the top
Save the prime.css file.
2. Modify the Listings Page. Edit the Listings file (listings.html) in Notepad. The list-
ings information currently uses the <h4> , image, paragraph and unordered lists
elements. You will reconfigure this area with two tables—one for each real estate
listing. Each table will have two rows. Refer to Figure 8.35. The first row in each
table consists of one table cell that spans two columns—containing the real estate
listing name. The second row in each table consists of two table cells. The first
table cell in this row contains the image (remove the floatleft class from the
image element). The second table cell contains the paragraph and unordered list.
Save your page and test it in a browser.
If the page does not display as you intended, review your work, validate the CSS, vali-
date the XHTML, modify as needed, and test again.
Web Project
See Chapters 5 and 6 for an introduction to the Web Project case. You will modify the
design of one of the pages to display information in an XHTML table. Use CSS to style
the table.
Hands-On Practice Case
1. Choose one of your project Web pages to modify. Sketch a design of the table you
plan to create. Decide on borders, background color, padding, alignments, and so
on.
2. Modify your project's external CSS file (project.css) to configure the table (and
table cells) as needed.
3. Update your chosen Web page and add the XHTML code for a table.
Save and test the page. Modify both the Web page and the project.css file as needed.
Test and modify until you have achieved the look you want.