HTML and CSS Reference
In-Depth Information
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
Go to the end of the
book for a full color
version of this figure
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:
<table border="0" width="80%">
<tr>
<td colspan="3"><h1>This is the banner area</h1></td>
</tr>
<tr>
<td width="120" valign="top">Place Navigation here</td>
<td width="10">&nbsp;</td>
<td>Page content goes here</td>
</tr>
</table>
The layout of the new version of the home page is configured as follows:
The table has border , cellspacing , and cellpadding set to 0 ; and a width of 80% .
The background color on the table cell used for the banner area is set to #d5edb3 .
Search WWH ::




Custom Search