Diary of a Web Developer
by Edward Tanguay

Tuesday, October 24, 2000

After learning HTML, the first technical question a new Web developer has is "How am I to position all this stuff on my screen?" The left/center/right choices of basic HTML do not give you a professional solution for Web site layout. For a professional layout solution, your choices are: frames, DHTML, or tables. Let me tell you why the best choice is tables and how to implement them effectively.

Avoid Frames If You Can

I rarely use frames for three reasons: (1) it is difficult for users to bookmark specific pages within the Web site, (2) many search machines will not register frame sites accurately or at all, (3) the main advantage of frames is that a menu is on the screen at all times, which I solve with server-side script.

Avoid Headaches by Not Using DHTML for Site Layout

Using the absolute positioning and layout features of DHTML are not a viable solution to Web site layout for me because: (1) DHTML is not supported by 3.0 browsers, (2) layers are not supported equally by Netscape and Explorer. This means that if you use DHTML for site design layout, you will be spending lots of headache-filled time writing specific code for various browsers versions.

Use tables for Web site layout

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.

Use Tables to Force Web Site Width

Most of your visitors will have their monitor resolutions set to one of three sizes: 640, 800 or 1024. Since most users have either 800 or 1024, the big question today is whether you should design for 640 or 800 as the minimum. If you use 800, then those with 640 resolution (about ten percent of your visitors) will have to scroll back and forth horizontally to see the full width of your site. If you use 640, the main disadvantage is that you simply 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 on the right. I still program most of my sites for 640.

Note that for your Web site 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="100%">
for 800 use: <table border="0" width="740">
for 1024 use: <table border="0" width="984">

Center your Web site

Especially if you are designing for 640 screens, you should center your table on the screen so that your 800 and 1024 visitors will have an equal amount of space on each side of your table (otherwise a 640 Web site on a 1024 screen has football field of space to the right). To center your Web site, use the align property of the table tag:

Stack Multiple Tables

A common mistake of beginners is to put their whole Web site in one table. The problem with this is that it causes visitors to look at nothing but a white screen until everything in the Web site is loaded, then they see the whole site at once. Browsing such sites give visitors an unpleasant, blinky experience.

To solve this, put portions of your site in various tables and stack them on top of each other:

When you stack your Web site in tables like this, it gives your visitors something to look at while the rest of your page loads. Notice, for instance, as my reading club site loads, you can read about the current book while the upcoming books are being loaded.

Top-left-body Format

Another Web site table structure that I use is a top table for the logo, then below-left the menu and below-right the body. Notice how my Web developer site loads on your screen: First you see the logo along with the Find Things Fast dropdown and Search field. This allows visitors who know exactly what they are looking for to make their selection and get going even before the full site appears. Second, you see the left menu appear. Visitors can peruse what is available on the site while the body is loading. Third, the body appears which completes the loading of the site. The syntax for such a top-left-body site is:

If Netscape Gives Up

It has been my experience that Netscape, when loading a Web with a table layout structure, may suddenly just "give up" and display nothing (!). This is caused by one of two things:

1. The most common is that a <td>, </td>, <tr> or </tr> tag is out of place or missing. This can easily occur in tables with unequal rows or columns. Explorer is much more tolerant of incorrect table syntax than Netscape. To find the problem, copy your HTML code into a new file and then remove all other code piece by piece until you only have only the table tags left. The error should then become apparent.

2. The other problem could be that you have multiple nested tables (tables within tables) and Netscape just gives up rendering them after awhile (!). Remove these nested tables until Netscape stops giving up.

Persistence

Tables are a powerful tool for creating effective site structure. Many of the tricks I have learned have come from hour-long bug hunts trying to get both browsers to display my site properly. But if you stick with it, you will slowly build the cross-browser skills you need to be able to position all your "stuff" on your screen exactly where you want it.