Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1
Go to the end of the
book for a full color
version of this figure

(^330) Chapter 8 Tables
In Notepad, you will modify this page so that it uses a table for layout. See Figure 8.19
for a layout sketch containing a top banner row that spans three columns and a second
row with three columns: navigation area, spacer, and main content. The sample page is
shown in Figure 8.25 (shown also in the color insert section).
Figure 8.25
New index.html
using a table for
layout
Compare it with the previous version of index.html page shown in Figure 8.24. The
content is very similar but the pages look quite different! The table layout with vertical
navigation creates visually separate areas. The page still uses the embedded style sheet.
The page content has been moved into a table. The XHTML code for the table follows:











This is the banner area

Place Navigation here   Page content goes here

The layout of the new version of the home page is configured as follows:
●The table has border,cellspacing, and cellpaddingset to 0 ; and a width of 80%.
●The background color on the table cell used for the banner area is set to #d5edb3.
Free download pdf