When developing a web site one can choose between creating a CSS-based or TABLE-based web site. Both types of layouts have advantages and disadvantages and perform quite differently. They also raise (or address) accessibility issues. <further reading: Tables vs. CSS>

If you are new to web design you will probably find using tables to layout web pages much easier than using cascading style sheets (CSS).  You should cut your baby teeth on tables so that you get an understanding of the process of designing for the web.  Once you have mastered this type of design, you can then move onto designing purely in CSS, as it is now the accepted method for laying out web pages.

As a web tutor, I want you to be able to achieve a good looking page, without the necessity of understanding the complex CSS code. Let's make your first web page achieveable.  You can move onto designing with CSS once you have a better understanding of page layout using tables. 

One of the most popular reasons for using tables for layout is that you can fit much more information in a smaller space, and it is easier to navigate. 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.

Set out below are 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 that has 4 rows x 1 column, with no borders and cell padding of 3 pixels. The first row of this table (gray) will contain the company logo and name. The second row (yellow) will contain the navigation links, the third row (white) will contain another table to hold page content, and the fourth row (purple) will contain the footer information.

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

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:

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

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.

Finally, here is the table design (using Version 1) as it would normally be displayed on a web page - minus the borders and coloured areas ....