Web Page Layout Using Tables 

Web Page layout is usually accomplished using either tables or frames.

 Frames are not particularly search engine friendly and are really for experienced designers and will not be considered further.

You should also note that most web pages today (2007) use Cascading Style Sheets for layout and no longer use tables.

 However for those of you new to web design it is far easier to start using tables and progress to using style sheets.

If you just simply place text on your web page it may look good in your web browser but if you change the size of your browser window the text will re-flow to fill your browser window. This may completely destroy your carefully laid out web page.

Tables on Web sites are used to present information in a particular way and are by far the most popular way of organising a web page. Tables help designers layout text and graphics in the page so that they remain in specific places and relationships to other information on the page. Tables also help determine what happens to the content of a web page when the browser window is re-sized.

The basic HTML tags are: <TABLE> and </TABLE>. A table with one row and three columns would look like this [with the text A, B, C in the cells]:

<TABLE>
    <TR>
                <TD>A</TD><TD>B</TD><TD>C</TD>
    </TR>
</TABLE>

The basic idea behind using tables for Web site layout is to create an invisible table by giving it a border value of zero. This makes the table transparent to the user yet allows your text and graphics to be positioned where you want them. The more cells you make in the table, the more precise you can position your elements.

Forcing the Page Width

Monitor resolutions will normally be set to one of three sizes: 640, 800 or 1024 so which resolution should you design for 640,800 or 1024. If you use 800, then those with a 640 resolution will have to scroll back and forth horizontally to see the full width of your site. If you use 640 you have less room for designing your page; however, all of your visitors will be able to see the full width of your Web site on their screen and your Web site will also be able to print on most printers without being cut off. Most sites are designed still for 640.

In order to fit completely within your users' browsers, your table width pixel value should be 40 less than the width of the screen resolution for which you are designing, hence:

For 640 use: <table border="0" width="600">
for 800 use: <table border="0" width="740">  default today
for 1024 use: <table border="0" width="984">

Centring the Page

In order for the page to look good and not have lots of unused space on one side of the screen when viewed in high resolution monitors in is a good idea to centre the table using the align property of the table tag. To centre your Website.

<table border="0" width="740” align="center">
...
</table>

Multiple Tables

A common layout mistake is to put the whole Website in one table. The problem with this is that the entire table must load before the page is displayed. It is far better to create multiple tables stacked on top of each other. This is shown in figure 1.

Figure 1: Typical table layout

In order to better control the layout the tables are nested inside an outer framing table with a fixed width-normally 740 pixels as shown in figure 2.

Figure 2: Typical table layout

Basic Steps to Create Layout of figure 2 above

1.      Create an outer table centre aligned one row and 1 column. Set table width to 740 pixels , set border to 1 , and cell padding  to 5. The border will be later set to 0 but setting them to 1 helps you to see the layout clearly. This is  table 1.

2.      Create a new table inside table 1. The table width is 100%, set border to 1 , and cell padding  to 5. The border will be later set to 0 but setting them to 1 helps you to see the layout clearly. This is table 2. This table is typically split into 2 or 3 columns but here we will have a single row single column table. This will serve as the main navigation and logo area.

3.      Insert a separator image under table2. This can be a gif image or simply an horizontal line using the hr tag. It is not absolutely necessary you can also use another table with a background colour as I have done here.

4.      Create a new table inside table 1 below the separator image.  The table width is 100%, set border to 1 , and cell padding  to 5. The border will be later set to 0 but setting them to 1 helps you to see the layout clearly. This is table 3. This table is typically split into 2 or 3 columns but here we will have a single row single column table. This will serve as the main content area.

5.      Insert a separator image under table3.

6.      Create a new table inside table 1 below the separator image the table width is 100%, set border to 1 , and cell padding  to 5. The border will be later set to 0 but setting them to 1 helps you to see the layout clearly. This is  table 4. This will serve as the bottom navigation area along with copyright notice.

7. Once you are happy with the layout set the border for all tables to 0. The cell padding gives a margin between the edge of a table and its contents this can also be set to zero or set to another value. The page is then normally saved to be used as a template for other pages.

 The above steps are illustrated in the following figures:

1-     Create table1 –I have created a red border for illustration purposes.

2-     Insert some line feeds inside table 1 then Create table2

3-     Insert separator.

4-     Create remaining tables

5-    Remove borders from tables 2,3,4.

6-     Remove all borders –This is what you will normally see.

7-     Here I’ve put a yellow background on table1 just to show that it  is still there and how it centres in the browser.