Left Border Table Technique

1. It can be used to keep the content OFF of the border on a page with a left border background image.
2. I can be used to divide the page into two sections, with the small section on the left usually used for site navigation and the larger section used for page content.

Note: This tutorial simply demonstrates how to code a page that uses a left border background. Please refer to my Table Tutorial for a more complete lesson in using tables. There is also a chart of the main code attributes and values you can use with tables on the Table Tutorial page, or a bigger chart on the table tags page. Lastly, the Inner Circle member site has much more comprehensive table tutorials along with several sample tables and the code that makes them go. There is also free software for generating the code for simple tables and much more detailed reference charts (over 30 reference charts in all). You're crazy if you don't join! Crazy I tell you!

<table style="width: 640px;">
<tr>
<td style="width: 140px;" valign="top">
Cell 1 content
</td>
<td style="width: 500px;" valign="top">
Cell 2 content
</td></tr></table>

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 place your content just the same as you would for a table-less HTML page. You can also use the first cell to control your navigation layout if you want it on the left side.

The valign="top" attribute and value make your content start at the top of each cell. This is useful because one column of content is usually longer than the other, so it brings the content of each column to the top rather than the short column being centered vertically within the column.

Notice where the code shows Cell 1 content. This is where the left border would be. If you don't want to place any content on the border you need to include a   character entity in place of the words Cell 1 content. This holds the table cell open. Without it the cell would collapse in most browsers.

If tables are too confusing for you at this stage in your development, try my other tutorial that demonstrate two other techniques for keeping content off the border.