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

layout can be found in the student files (Chapter8/tables/table2.html). Sample code for
this type of table layout follows:

<table border="0" width="80%" cellpadding="5">
<tr>
<td colspan="2"><h1>Logo Banner</h1></td>
</tr>
<tr>
<td colspan="2"><h2>Navigation</h2></td>
</tr>
<tr>
<td valign="top">Main Content</td>
<td width="100" valign="top">Sidebar</td>
</tr>
</table>

Figure 8.22
Horizontal navigation
with right sidebar

Figure 8.23
Notice the symmetry
of the left and right
columns in this
design

There are many ways to combine table rows and columns to create interesting, usable
Web pages. The page layout shown in Figure 8.23 uses a vertical left-side navigation,
center main content area, and right sidebar area.

The vertical navigation area allows room to display a wide variety of links and is more
useful for a large site than the previous layout. A page using this layout can be found in
the student files (Chapter8/tables/table3.html). Sample code follows:

<table border="0" width="80%" cellpadding="5">
<tr>
<td colspan="3"><h1>Logo Banner</h1></td>
</tr>
<tr>
<td width="100" valign="top">Navigation</td>
<td>Main Content</td>
<td width="100" valign="top">Sidebar</td>
</tr>
</table>

Flexible and Fixed Table Widths
The examples in the section above use a percentage table width of 80%. This creates a
flexible-width table that the browser stretches to take up 80% of the browser window
regardless of the screen resolution or window size. Review the table page layout exam-
ples in the student files (Chapter8/tables). In these examples, the columns used for navi-
gation or sidebars are configured with a fixed width. The table cells used for the banner
and main content are not configured with a width—this will cause the browser to