Nesting tables

If you're learning to design on the Web, one of the trickiest aspects you'll come across is how to physically control the positioning of page elements. The best technique is to use tables, but these work very differently from the layout tools used in packages such as QuarkXPress, PageMaker or Illustrator.

It's essential to know exactly how you want your design to look before you start work in Dreamweaver, and an accurate comp created in Photoshop or Fireworks is a fundamental prerequisite to good table design. Even then, there's a knack to creating table structures that accurately and reliably control the positioning of page elements. The important thing is not to use a single table for the whole design, but rather to use tables inside other tables - a technique called nested tables.

The following tutorial shows you the method of building pages this way in Dreamweaver 4, using a fictitious example called Justmaps.com. If you want to follow the tutorial but use a different Web editor, this shouldn't cause you too many problems. To follow it comfortably, it's best to make sure you're familiar with applying CSS styles, setting cell and column widths, and setting cell background colour and cell background images in your Web editor.

Download the files you'll need to complete this tutorial:
nesting_tables.pdf
table_start.zip