Page Design Using Tables

Although HTML does some things well, there are other areas where it is not so good. Page layout is one of those areas. Using tables is one method designers use to control their page layout. If you are not familiar with tables, see our introduction to tables.

Holding your Pages in Place

A table is best described as a container used to store elements on a page. Each table 'cell' can hold its own piece of text or graphic, and hold the entire layout of your page together.

The bigger the table, the longer takes to download. If you have a banner or headline at the top of your page, it is a good idea to have it in a seperate table. This way it will download first, and visitors will have something to look at while waiting for the rest of the page to download.

The first step is to designing a template for your pages. Decide where you will place your headings, images and text, and divide the page up into sections. It helps the feel of your site to stay with the same structure on every page.

Use these table attributes to control your page layout.

Width and Height

You can set the width of a whole table or for individual cells. It can be specified in pixels or as a percentage of the browser window: <table width="600"> or <table width="100%">

You can also set the height for cells in pixels: <td height="40">