Home | Web Page Design Club | Web Design Video Course

Layout - Using Tables

You have 2 choices to format the layout of individual web pages. You can use Tables or CSS stylesheets.

Use tables to position your content

Use tables to add colour

Using Tables to position content

Tables can be used to define the layout of the content in your web pages. These tables do not necessarily have to be visible and on most web pages are not visible - the table border is set to "0".

There are however several things you need to know about tables which most web design books don't tell you.

Loading tables in sequence

Firstly, a browser will not display a table until all the content in that table has loaded. Therefore if you simply create one all-encompassing table for your page contents, the page will not be displayed until the whole table has loaded. If the file size of the page is large, the visitor will have a long wait before seeing any content, and may click away to another site.

Studies have shown that page loading times more than 7 or 8 seconds greatly increase the attrition rate (loss of visitors).

The solution is to split your web page up into 2 or 3 separate tables.

Example 1

Table 1 - header
Table 2 - contents
Table 3 - footer

Then when your tables load, the visitor has something to look at while the rest of the page is loading.

Loading horizontal tables

Secondly, you can create tables to load across the web page horizontally.

Example 2

Table1 - header
Table2 - left menu
Table3 - contents
Table4 - footer

In Example 2 above you can set the width of Table2 to 150 pixels for example and align it to the left. You can then set the width of Table3 so that the combined width of Table2 and Table3 is equal to the width of Table1. The HTML code for Table2 would look like:

Inside your table tags is where you add the table rows and table data. For example this table would have 2 rows and 2 columns of data. To learn more about using tables see the HTML tutorials on HTML Tables

Using Tables to add color

The third important feature of tables that is often overlooked is that they can be used to add color to a web page instead of using images. Although images add to the aesthetics of a web page, if you don't have professional quality images it is better not to include them at all.

First impressions are very important and visitors will quickly click away from a site that looks "homemade".

By giving your tables a background color or image you can add color and interest to your site without investing a large amount of time creating graphics.

You should also be careful when using color because different colors mean different things to certain groups of people. For example, in France purple is often associated with death. I have listed a few sites on using color which analyse the use of color on websites in more detail.

The code to add color to a table background is this:

where #FFFF00 is the hexadecimal value for yellow for example. The hexadecimal value is made up of the primary colors, red, blue and green in that order. FF means Full, 00 means none. So white would be #FFFFFF, black would be #000000 and red would be #FF0000.

To add a background image to a table the code would be:

Internet Explorer and Netscape both support the placing of images in the <TABLE> element, also in the <TD> and <TH> elements. In the <TABLE> element the images will be tiled behind all of the table cells.

An alternative to using tables to define the layout of a page with <DIV> or <LAYER> tags and use CSS to position them on the page. However Internet Explorer v4.x and Netscape v4.x have different support for CSS, this method has not yet been widely accepted. Netscape 6 however adheres much more strictly to the W3C standards for CSS. As soon as we stop designing for version 4 browsers, there will be much wider use of CSS to define the positioning of web page elements.

 arrowdown Using CSS

web page design club

Home | About Us | Contact Us | Privacy