|Home | Web Design Tutorials | Free Graphics | Custom Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Benefits | Login | View Cart|
Left Border Table TechniqueBelow is a miniature representation of a page layout table that serves one of two purposes.
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!
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.
Almost a NewsletterChanging list hosts. Will post a new subscribe form shortly.
Did you know...The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Press Room