AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
Print This Page

You are here : Home - Web Development - HTML - Table Tips

Table Tips



Tables.

Tables are an excellent way of laying out your webpage. This seems to be their primary function in webpage design. Everyone is using tables - left navigation in one cell, content in another etc. While tables are great for laying out your site they bring their own problems which I will try to explain.

This is the hard bit. A table is treated as a separate document within your page and will not display until all the contents of the table have loaded into the browser. If it is a small table then it will load quickly and not be much of a problem. However, if your site carries third party news or banner advertising try to place these elements in their own table instead of trying to incorporate them into your design. Why? - your content will not display until the banner has been retrieved from the ad server - which are usually quite slow due to the volume of traffic being served.

Example 1
Table Example 1
In this example, which is a very common web page layout, the page is made up of 1 table. The full contents of this table won't load until all the elements have down loaded to the browser as explained above.

So how can we fix this?. The first option would be to avoid tables all together and use style sheets to position the elements on the screen. This is an ideal world solution and in future I see this being used as standard but until then we still need to use tables.

The best solution is to break your page up into smaller tables. This of course, depends on the design of your site but most layouts could be broken up and reworked with a bit of thought. Before you break up your current layout and build smaller tables inside table cells don't - it won't solve your problem:)

Example 2
table layout example

In this example all we have done is split the page into 2 tables. The main difference between these 2 examples is the content no longer has to wait for the logo and banner ad to download before displaying in the browser. Careful planning of your pages means that your visitor should be able to start reading the content quicker as is starts to display a section at a time. They won't have to wait on the whole page loading before they can start reading.








Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]