Web Page Layouts
How to Design a Web Page

Single Row Table Design

One of the easiest ways for beginners to design a web page is by using single row tables.

Single row tables make it easy to place multiple columns on a web page. These multiple columns can contain images, paragraphs, lists or navigation tools.

Below you will find different versions of the same page with a simple diagram of the tables beside it. You can get more information on using tables from our HTML tutorial.

The question has been raised about how well web pages built using this method perform on the search engines. We can only say that we use the method throughout our main website and have several #1 rankings and many top 5 rankings for our keyword phrases.

The single row table method does increase the amount of code on your pages. It will slow page performance of large pages constructed using this method. Try to keep page size below 20k.

Note: A more advanced web design technique for structuring pages would be to use CSS and the division tag. You should get some experience with Basic HTML and CSS before you attempt this method. See Below.

Layout #1

The first layout is very basic and uses 2 single row tables.
Get the code: Click Here

The actual structure of the page is shown in the diagram to right.Web Design Layouts

Table 1
left cell heading and navigational devices
right cell document body
Table 2
contains footer


Layout #2

This web page consists of 4 single row tables.Web Design Layout 2
Get the code: Click Here

Table 1
Left Cell company Logo
Right Cell Slogan
Table 2
1 cell for navigation
Table 3
Left cell - Body Text
Right Cell - image
Table 4
1 cell - footer

Note: You can get the button images for creating the navigational device or site map from our free button gallery.


Layout #3

The web page here is constructed using 3 single row single cell tables. A fourth could be added for the footer.
Get the code: Click Here

Layout #4

This web design layout is also made up of 4 tables.
Get the code: Click Here

Table 1
1 cell for navigation
Table 2
Left Cell Logo
Right Cell Slogan
Table 3
Left Cell Body Text
Center Cell Image
Right Cell Sideboard
Table 4
1 Cell for footer

Design a Web Page With The Division Tag

These same pages can all be designed using the division tag. There are some advantages and disadvantages to using this method. For details see the Design with Divisions and CSS.