Mapping Out Your Page

Mapping Out Your Page

Before you create a complicated table, it's really important to have a vision of what you're about to construct. You should know how many rows and columns you need, how big these should be, and where each of the items on your page should go.

To map out your page:

Design your page on a piece of paperwith a pen!

Figure out how many rows and columns you will need. Identify any rows or columns that will span more than one space.

If necessary, you can nest one table inside another. However, you should keep nesting to a minimum as it tends to slow browsers downand sometimes causes them to break down altogether.

If you're going to make a static, fixed design, measure how wide your table should be (the standard is around 600 pixels) and then decide how many pixels wide each column should be. For liquid designs, use percentages.

Create the skeleton of your page with just the table tags but little or no content.

Finally, create or insert the content.


  • One good way to get ideas for table structure is to look at how others do it (see page 53). However, there are some very complicated setups out there. One way to get a handle on what's going on in someone else's page is to download the source code and then change the background color of each nested table (see page 240) so you can better see which parts of the layout belong to which table.

2. Here's a map of the main example used in this chapter. I use one table for the top set of ads and logo and one table for the lower navigational bar and content area section. Note that there is a third table floating in the content text.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows