Several students have run into a problem when trying to use a background to create a left-hand color margin and tables to organize the material. This is a popular layout because it mimics a frameset while avoiding the problems posed by frames.
The page may look something like this when the screen is full-sized:
But when the screen is resized to be smaller, the tables collapse on the background so that it looks like this:
A key to not having the table collapse is to use fixed pixels to define the width of your cells, rather than relative percentage. This means that the left hand cell needs to be something like <td width="125"> and the other cell needs to be something like <td width="450"> rather than defining them as 25% and 75%.
However, even this will collapse when the screen gets very small. Remember also that the W3C recommends using relative widths whenever possible to facilitate accessibility.
Here are samples of several attempts to deal with the problem:
- Sample with width set in relative percentage
- Sample with width set in fixed pixels
- Sample with one width set in fixed pixels, other in percentage
- Sample with fixed pixels, plus extra relative column
- Sample with nested tables with both fixed pixel widths (this works!)
- Sample with nested tables for only one colum fixed and other relative (this works too!)
One complex coding solution is illustrated at thehungersite.org.The pages have a left edge textured to look like paper with a list of topics, which contrasts with the plain white space where the main contents is written. When you resize the screen, the layout stays intact.
If you view the source code, you will see that they do this by nesting two tables within an overall table. The overall containment table has only one row and two cells. Each cell contains a table. Because they use a <tr> and <td> for each link inside the left-hand table, it is easy to get lost trying to follow the code. However, it is basically structured like this (with content omitted):
<html>
<head>
<title>
</title>
</head>
<body background="image.gif">
<div align="left"> <!-- So nothing
floats loose; they don't trust that default will always push it left -->
<table> <!-- Original, overall table begins
-->
<tr> <!-- Start row for overall
table -->
<td> <!--
Start first td tag for overall table -->
<div align="left"> <!--
Just to make sure that the following nested table will hug left-->
|
<table> <!-- Start table tag for
first nested table to contain material on left --> |
</div> <!--
End the div tag for this inset table -->
</td> <!--
End only td tag for overall table; don't end row for overall table yet
-->
<td> <!--
Start second td tag for overall table -->
<div align="left"> <!--
Another div tag to make sure this second nested table stays in place -->
|
<table> <!-- Start table tag for
second nested table to contain material on right --> |
</div> <!--
End that second div alignment tag -->
</td> <!--
End second table data cell of overall table -->
</tr> <!-- Finally end
the row for the overall table -->
</table> <!-- At last close the overall
table -->
</div> <!-- Close that very opening div
alignment tag -->
</body>
</html>
This is one solution that seems to work. There is a caution, however: If you nest too many tables within tables within tables the computer gets indigestion and slows down display. The Warning at Webmonkey points out that nesting tables slows display and suggests that if you have to nest more than two deep, you should rethink your design.
If anyone has other solutions, please send it to the ListServ.