HOME articles tutorials tool directory about

Using Tables as a Layout Tool (continued)

The figure below shows a one-row table that makes use of the attributes we've discussed so far.

This is the navigation column. This column holds the main detail of the page. It can contain lots of text, links, and images. As you add more content to this cell, the table will automatically grow longer. Or, if you prefer, you can set the height of a particular cell using the height attribute, which will also increase the height of other cells in the same row.

This table, which would work well as a page layout template, has the following characteristics:

It spans 100 percent of the visitor's screen.
It contains two columns, one that is narrow and one that is wide.
The contents of the cells align vertically at the top by default (no attribute needed unless you want a different vertical alignment).
The background color of the first column is set to a different color than the main column, making it easy to distinguish.
The first column uses the align attribute to center its text.
The cellpadding attribute has been used to keep the contents of the two columns from butting up against each other.

To view the HTML that created the table, click here.

A basic table layout like the one above will carry you a long way toward a well-organized and well-designed site. It may take a bit of effort to get the hang of how they work, but once you have a firm grasp of HTML tables, you'll wonder how you ever designed a page without one.

If you found this tutorial useful, please be sure to buy the book. Cheap Web Tricks: Build and Promote a Successful Web Site Without Spending a Dime is packed with practical advice that will help you design, publish, and promote your own Web site.

HOME articles tutorials tool directory about