Menukit Tutorial - Fixed width 3-column Layout using a table

3-Column Layout using a <table>

Objective We want a column on the left and a column on the right with widths specified in 'px' units. We also want a page header at the top of the page and a footer at the bottom of the page. The footer should be positioned at the bottom of the viewport/screen when the page is shorter than the screen but it should remain tied to the bottom of the page when the page is longer than the screen.

Outline of Method

We want the table to stretch vertically to the full height of the browser window. We might be tempted to insert an attribute 'height="100%"' in the <table> tag. But, the <table> tag does not have a 'height' attribute. Although some browsers do interpret a height attribute on a table this behavior is non-standard. We will use a style specification to give it a height so that our solution can comply with W3C standards.

Create a local site for this tutorial. Download the support files for this tutorial. Create an empty site and copy the support files into it. Start Dreamweaver and open the start page, 3colTable_start.htm.
Analysis of the 3colTable_start.htm page. The start page contains a 3 X 3 table. The table has a temporary 1-pixel border so we can see what is happening as we apply style settings. The cellpadding and cellspacing are both 0.
We labelled the table "wrapper" and applied a style to set the height to 100% and the width to 100%.
Annotated source code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menukit Help - Tutorials. 3-Column Layout using a <table></title>
<style type="text/css">

Browsers make the body element only as tall as is needed for the actual page contents - they do not stretch the height to fill the browser window (or more correctly, the viewport). But we can force the <body> to stretch to 100% of the viewport by giving it a height of 100% with a style specification. In some browsers, the <body> element gets its height from the <html> element rather than directly from the viewport. To cater for these browsers we also give the <html> element a height of 100%.
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table id="wrapper" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
3colTable_start.htm
Create a header. To create a header we merge the 3 cells in the first row. Give the header a height of 90px, a background color of #000059 and a text color of #F2F2FF.

Modify the first row in the table to look like this:

Delete the second and third cells and make the first cell stretch across the full width of the table.
<tr>
<td id="header" height="90" colspan="3"> </td>
</tr>

Include a style for it in the head section like this:

#header {
background: #000059;
color: #F2F2FF;
}
Create a footer.To create the footer we merge the 3 cells in the third row. Give the footer a height of 80px, a background color of #80A7E0 and a text color of #000033.

Modify the third row in the table to look like this:

<tr>
<td id="footer" height="80" colspan="3"> </td>
</tr>

Include a style for it in the page's head section like this:

#footer {
background: #80A7E0;
color: #000033;
}
Specify width of left colum.We want a navigation column on the left with a width of 100px so that a CSS Flyout menu with a width of 100px fits snugly into it. Specify a width attribute for the first cell in the middle row like this:

<tr>

We included an identifier on the cell because we'll need it in a moment when we want to add a background color.
<td id="left" width="120"> </td>
<td> </td>
<td> </td>
</tr>
Specify width of right column.You can give this whatever width you want (we made it 120px) or you can delete it if you just want a 2-column layout:

If you decide to delete this cell from the table then change the colspans in the header and footer to 2.
<tr>
<td id="left" width="120"> </td>
<td> </td>
<td id="right" width="120" > </td>
</tr>
Style the main content area. Now remove the temporary border from the table.
<body>
<table id="wrapper" border="0" cellspacing="0" cellpadding="0">
<tr>

The central cell acts as a container for the main page contents. Here we will set a text color and a background color for the cell. We will also set a 1-pixel border along the left and right sides to make the side columns stand out. First set the cell's identifier to 'content'...

<tr>
<td id="left" width="120"> </td>
<td id="content"> </td>
<td id="right" width="120" > </td>
</tr>

...and create a style for it like this:
#content {
background: #FBFBFF;
color: #000033;
border-left: 1px solid #000055;
border-right: 1px solid #000055;
}

We have set the colors for the header, footer and main contents area. However we have not defined any colors for the sidebars. We'll take care of that in the next step.
Set the colors of the side columns. It would be easy to assign a different pair of text and background colors to the left and right sidebars by inserting the required colors into #left and #right styles. Here we are just going to use the same combination of text and background colors for each side so we can set the colors for the table itself in the #wrapper style.

#wrapper {
height: 100%;
width: 100%;
background: #DDEEFF;
color: #000033;
}
Vertical Alignment. At the moment, if we were to just 'pour in' content into the side columns or main area we would find that the contents would be aligned vertically in the middle of each area (the default for table cells). We can change that by adding another style that resets the default vertical alignment for all table cells like this:

#wrapper td {
vertical-align: top;
}

See current state of the page with some filler text added in 3colTable_inter.htm which you can find in the support files.

Review We created a 3-column layout using a table that fills the browser window. We gave the first row a fixed height of 90px and the bottom row a fixed height of 80px. We did not set any height on the middle row. Instead, we made the table stretch to the full height of the browser window because we want the remaining space (after the header and footer) to be allocated to the middle row of the table.

A problem with Internet Explorer If you view the page with IE you will notice that the heights of the header and footer expand when the browser's lower edge is dragged downwards. IE does not allocate the remaining space to the middle row. It distributes it among all the rows, in effect interpreting the 'height' specification as 'minimum height'.

This problem is only noticeable with pages that are significantly shorter than the browser height. In this tutorial, we use some JavaScript to fix the problem. The solution is isolated in a conditional comment so that it applies only to IE.

Table modifications required The solution that is shown here works only for a table in which the cells are named 'header', 'content' and 'footer' as shown below. If you use other names for your table cells, you must change the JavaScript accordingly.
<table id="wrapper" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="header" height="90" colspan="3"></td>
</tr>
<tr>
<td id="left" width="120"></td>

This solution is only relevant if there is no height specification on the middle row.
<td id="content">Lorem ipsum dolor sit ... </td>
<td id="right" width="120"></td>
</tr>
<tr>
<td id="footer" height="80" colspan="3"></td>
</tr>
</table>
Table cell Labels
What the JavaScript does
The JavaScript solution comprises 2 functions, FN_Init and FN_Resize. These are defined as event handlers that are triggered by the 'onload' and 'onresize' events respectively.
The FN_Init function subtracts the combined heights of the header and footer rows from the height of the viewport/screen and assigns the result to the height of the middle row.
The FN_Resize function does the same whenever the size of the viewport is changed.
Finished page See the finished 3-column page with the JavaScript fix added in 3colTable_final.htm which you can find in the support files.
Now you can replace the temporary filler text by a space character to make an empty 3-column layout, 3colTable.htm ready to receive content.

Supplement Narrowing and centering the table-based layout is straightforward.

Reduce page width and Center it
First we set the page background to the dark color that we want for the margins and reduce the width of the table, like this:
body {
margin: 0;
padding: 0;
height: 100%;
background: #999999;
}
#wrapper {
height: 100%;
width: 95%;
background: #DDEEFF;
color: #000033;
}

Then we align the table in the center like this:
<body>
<table id="wrapper" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>

Your page should now look like page 3colTable_centered.htm which you can find in the support files.

Menukit

A Dreamweaver Extension

for making different types of Menus