Table Stacking
Many pages use a layout where the main content is "boxed in" by columns and horizontal nav bars. This produces a nice "box" effect that separates the page's main content from the navigational links, advertising, etc.
A page like this is made very simply. Make the necessary columns and then "stack" the nav bar tables above and below the table containing the columns. Using separate tables for the columns and the nav bars offers you more flexibility as opposed to using COLSPAN to make the nav bars and columns out of one large table. Separate simple tables also load a little quicker than one complex table.
Sample Page
Here's an example of a fully boxed page.
To get an idea of how I constructed it, see the same page with the borders turn on here. Not too rough. Lets take a quick walkthrough on how this common layout is coded.
Making The Columns
Begin making a boxed page by making the columns and the area for the main content. In the example the outside columns are 20% of the width of the page. This leaves 60% for the main content area.
<html>
<head>
<title>Fully Boxed Page Example</title>
</head>
<body>
<!-- Main Table -->
<table width="100%" height=500 cellspacing=0 cellpadding=5 border=0>
<td width="20%" align="center" valign="top" bgcolor="#0099ff">
Links Column
</td>
<td width="60%" align="left" valign="top" bgcolor="#ffffff">
<p>Your main content will go here</p>
</td>
<td width="20%" align="center" valign="top" bgcolor="#0099ff">
Comments and small block ads can go here.
</td>
</table>
</body>
</html>
Nothing too exotic here. It's simpler than most of the <table>s we've coded so far. Now we need to code the horizontal nav bars. I've made both the top and bottom bar mirror images of each other, so we can code one and just copy and paste to make the other.
The horizontal nav bar's code is:
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#1</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#2</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#3</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#4</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#5</span>
</td>
</table>
Now lets put the horizontal nav bar code immediately before and after the 3-column code to produce the boxed effect:
<html>
<head>
<title>Fully Boxed Page Example</title>
</head>
<body>
<!-- Nav Bar -->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#1</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#2</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#3</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#4</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#5</span>
</td>
</table>
<!-- Main Table -->
<table width="100%" height=500 cellspacing=0 cellpadding=5 border=0>
<td width="20%" align="center" valign="top" bgcolor="#0099ff">
Links Column
</td>
<td width="60%" align="left" valign="top" bgcolor="#ffffff">
<p>Your main content will go here</p>
</td>
<td width="20%" align="center" valign="top" bgcolor="#0099ff">
Comments and small block ads can go here.
</td>
</table>
<!-- Nav Bar -->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#1</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#2</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#3</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#4</span>
</td>
<td width="20%" align="center" bgcolor="#0099ff">
<span style="color: #9900ff">Link#5</span>
</td>
</table>
</body>
</html>
That's all there is to it. I generally code and debug the horizontal nav bars and columns separately and then paste the nav bar code into the main 3-column template. You may find another technique easier. Try to replicate the sample page. Play around with column and nav bar widths and heights.
 To Next Advanced HTML Lesson
 Back To Advanced HTML Index
| 
