Bearing in mind that a table or cell with no width defined will collapse to its smallest possible dimensions and that a cell with a 100% width will expand to its maximum possible dimensions is all we need to design a page layout (See some of the examples on the background information page to see how different combinations of width, cell padding and cell spacing give different effects with various types of cell content.)

We will use this knowledge to work through a sample project that will render a common style of web page, as shown below.

Take a look at the page in your browser, if you'd prefer:

Completed Page Example

Note that all the examples below will load into a new browser window.

The style is familiar: a page banner which occupies the full width of the top of the page. The page body has white space down either side with a navigation pane on the left of the main page content.

The main page content is the key resizable area.

Start with a new, blank page in your HTML editor.

Create a single table of two rows and one column, with the width attribute (width property if you're using Dreamweaver) at 100%. For the cell on the top row, set the horizontal alignment to right and the vertical alignment to top. You can leave the lower cell on its defaults for now.

Insert a banner graphic in the top cell - It will be placed top right and you page should look like the page here.

We'll start creating the inner table with its borders visible, just so we can see what's going on when the page is viewed in a browser.

So, next, create a second table, inside the lower cell of the existing table: Its width should again be 100%, it should have cell spacing and cell padding each set to 6 and it should have a single row and four columns, like this.

Step three is to give the body of the page some format: Set the third column from the left to width 100%, forcing it to balloon out as far as possible. But to prevent it crushing the other three columns into oblivion we'll place a small image in each, as shown here. The images have been chosen for their visibility!

We'll create the navigation pane by assigning a background to the second column from the left, just to give it an identity, and putting another table into the cell. This new table will replace the spacer image we put in during step three. The new table is a single column of five rows and some text should be added to each cell. Its width is set to 100% and the page now looks like this.

The width of the navigation pane is largely determined by how small the browser can manage to make it around the text contained in each of its cells. To give it adequate width, and to keep my name on a single line, the copyright declaration contains the source Chris Pearson rather than the more simple Chris Pearson. The   is an HTML non-breaking space - It is treated like a character rather than a gap between words, so a browser treats Chris Pearson as a single word and - as its the longest word in the table - that determines the table's width.

The next step is to place the content into the body of the page - Either type in text or cut it from another application and paste it in. Of course, you can use tables here, too, to structure the page's content but for this example we'll stick with some bland text, like this.

The final step is to replace those green spacer images with something exactly the same size but transparent and to set the inner tables' border attributes back to zero, so we won't see any of them. Giving the final page.

Having gone to all the trouble necessary to make the page look nice, why stop there?

It doesn't take much more to ensure all the text is assigned a font, a size, a colour and it's all properly justified. That will be another step towards making the page rendered by the user's browser the same page you designed.

And if you've gone that far, remember that putting decent descriptions into tables' summary attributes and image alt attributes will make the pages come to life for visually-impaired visitors, amongst many others. It will also ensure that your pages validate!