Triple border page layout tutorial

This type of page layout is done by using 2 tables, one nested inside the other.

The black and white star background is the normal page background, set in the body tag.

The second green star background is the background of a 1 row, 1 column table set to about 90% width. Inside this table is another 1 row, 1 column table set to 100% width.

This inner table is centered and spaced by the settings of the 1st table attribute of cellpadding, and the cell alignment of center.

To set a bigger space at the top and/or bottom of the first table on the page add one or 2 line breaks <br> before and after the table. The 1st table is centered on the page.

Following is the HTML of this page, less this content text.

Your page content in here

</td>
</tr>
</table>

</td>
</tr>
</table>
<br>
</div>
</body>

There is a work around for Netscape 4 needed. If you have no background image for the inner table, just a bgcolor, then Netscape 4 will show the 1st table background right through. To prevent this happening insert a transparent gif as the background for the inner table.

Of course, if you are using a background graphic for the inner table this problem is solved.

Adjust the width of the 1st table - % - to get the side border width you want, and set the cellpadding of table cell to set the border spacing for the inner table.

The content cell has a cellpadding of 10 set to provide a breathing space between you content and the edge of the table. You may adjust this to suit yourself, but always have some padding.

You may also have table borders if you wish. I have set border="0"

Always remember to set a bgcolor for the page and tables to approximate the graphic color so the text can be seen clearly if, for some reason, the graphic doesn't appear.