When you are new to web page design it can be difficult to plan the layout of a web page. Web pages gain structure when you use tables in the layout. When you use nested tables, the page layout can be complex but still easy to manage.

I have set out below the steps to creating a complex page layout:

Step 1:  Open a blank web page. Insert a table (blue) that is 1 row x 1 column, ie: a single cell table. Add a border if you wish and some cell padding, say 10 pixels ...

Main Table:  1 Row x 1 Column with border and cell padding of 10 pixels

Step 2:  Inside this Main table, insert another table (yellow) that is 4 rows x 1 column, with no borders and cell padding of 3 pixels. The first row of this table will contain the company logo and name. The second row will contain the navigation links, the third row will contain another table to hold page content, and the fourth row will contain the footer information.

Note: borders are shown here for display purposes - these would be turned off in the actual web page.

Main Table:  1 Row x 1 Column with border and cell padding of 10 pixels

Step 3:  Inside the third row of the yellow table, insert another table which will hold the main content for the page.  The green and white table shown below has 1 row and 2 columns. You can add more rows and columns to this table as necessary.

Here are 3 variations ...

Version 1: A 1 row x 2 column main content table.

Main Table:  1 Row x 1 Column with border and cell padding of 10 pixels

Version 2: A 1 row x 3 column main content table.

Main Table:  1 Row x 1 Column with border and cell padding of 10 pixels

Version 3: A 1 row x 3 column main content table with a nested table in the right hand column which contains 6 rows and 1 column.

Main Table:  1 Row x 1 Column with border and cell padding of 10 pixels

Finally, here is the table design (version 1) as it would normally be displayed on a web page....