Left Border Background Table Trick

Below is a sample table for keeping text and other content off the border of a left border background. The same trick is used to place content on the border area while still keeping it separate from the main page content area. There are other table samples showing a variety of table styles at the members site. Learn more about the member site.

The idea behind this trick is to create a narrow table column on the left side of the page, with a wide column on the right side of the page, then place all your content within the table.

cell 1 cell 2

<table width="640"> <tr> <td width="140" valign="top"> &nbsp; </td> <td width="500" valign="top"> cell 2 </td></tr></table>

You can adjust the column widths to suit. Leave the   command in place to have no content in the border area, or remove it and add content such as navigation buttons if you want to use the space. The   holds the table cell open when you want to leave the space blank, otherwise the column would collapse and your content would run onto the border.

Using a table to keep the text off of left border backgrounds is fairly easy once you have the hang of tables. Simply code the width of the first cell slightly wider than your border. Then in your second cell you'd write your code and place your content just the same as you would for a table-less HTML page.

The valign="top" attribute and value force the content to start at the top of each table column. This is useful because the content of one column is usually longer than the content of the other, so this brings the content of each column to the top rather than the content in the shorter column being centered vertically within the column, which is the default alignment.

If tables are too confusing for you at this stage in your development, try my other left border tutorial that uses a very simple transparent gif trick to accomplish the same thing. The main drawback to the transparent gif trick is that you can not place link buttons or other content in the border area.