Skip to main content

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 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:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.