Background

In the dark ages of HTML, like back in 1993, page layout was not
an issue. The Web was a medium for scientists to use to share data and papers
with each other, and they did not particularly care about creating logos, positioning
elements, and creating snazzy designs. But when Mark Andreesen and friends introduced
Netscape, and ISPs like AOL started including the Web in their offerings, something
quite unexpected happened. Ordinary non-scientist types started “Web surfing”,
and companies started to look at them as a market, and graphic design became
an issue.

The big problem that designers faced was that HTML had never been
designed as a page layout language. The emphasis had been on creating a logical
structure for the data in scientific papers, there were sufficient tags and
procedures to make that happen, but not for more advanced graphic design. Netscape,
and later Internet Explorer, responded by creating additional tags and elements
to help with the look of the page. Many of these were incorporated in the official
HTML specifications at a later date, but many were not. Some of them, like the
BLINK tag, thankfully have almost entirely disappeared. The added tags helped
in some ways, but still fell far short of a real page layout method.

The breakthrough came from an interesting fellow named Dave
Siegel. He put together the two ideas that made HTML capable of page layout:
Tables, and Shim GIFs. His Web site is worth a peek or two if you are interested
in design. He has strong opinions on a number of topics, and you may not agree
with everything he says, but he will get you thinking about Web design, that
is for sure.

Tables for Layout

The principle here is fairly straightforward. You make the entire
page one big table, with your content stuck into cells where you want it. By
using a number of rows and columns, and COLSPAN and ROWSPAN attributes as needed,
you can create sections on the page and drop content (e.g. images, text, etc.)
into each of those sections as desired.

Problems to watch out for

When you are using tables to control page layout, there are some
problems you need to be aware of. The first is that one little mistake can ruin
the page. When you use tables, the HTML code is far
more sensitive to mistakes. For instance, leaving out one closing table tag
can cause Netscape to display a blank screen.

The problems become even trickier the more complex your code becomes.
Not only is it harder for you to figure it out, you can easily confuse the browser.
This is most likely to happen with nested tables. For this reason, most experienced
Web designers will use nested tables quite sparingly. You can almost always
achieve the same effect with a single table, using additional rows and columns,
and COLSPAN and ROWSPAN attributes as needed. One thing that beginning designers
sometimes overlook is the role of the browser. The rendering engine at the heart
of the browser is supposed to take the code and turn it into a visual object,
and how it does so varies quite a bit from one browser to the next. If your
goal is pixel-perfect page layout, you will never get there with all browsers.
Each one will display something slightly different, and frequently both will
be correct as far as following the standards is concerned.

Another problem is that complicated page layouts made with tables
can be almost impossible for a non-visual user agent to decipher. With the laws
of the U.S. moving towards requiring accessibility on a large number of sites
(currently, any organization that receives federal funds must make their Web
site accessible, by law), the use of tables for page layout is becoming problematic.

On the other hand, the only alternative to using tables for page
layout is using Cascading Style Sheets for positioning, and support for that
in browsers is a bit spotty right now. Older browsers, like Netscape 3 and Internet
Explorer 3, have little or no support for CSS. If you design a page using CSS
for positioning, and someone uses an older browser to view it, the results will
be quite bad. So you need to look at each situation. I am Webmaster for a college
Web site that is subject to accessibility requirements, so we have to use CSS
for positioning. Before I can begin recoding all of our pages (and we have over
1,000 pages), I need to make sure that every computer on campus has at least
a 4.x level browser, minimum. Then I need to place what is called “sniffer”
code on each page to redirect anyone using an older browser to a page that explains
why they need to upgrade their browser before coming back.

Cell Size Issues and Shim GIFs

When you enter information on the width and height of a cell,
you are not really giving firm orders to the browser; it is more like suggestions.
The rendering engine frequently is given some leeway in what it does with table
cells. If it needs to squish a cell a bit to make the table fit the screen,
it will do so. The text will probably wrap differently as a result, and this
can lead to undesired outcomes. The way to control this is to make use of what
are called “shim GIFs.” These are 1 pixel transparent GIFs that can
be inserted into a cell and resized to control the size of the cell. This works
because the browser will never compress a cell below the size of an image contained
in the cell. So, if one of your text cells is getting compressed and you want
to stop it, insert your shim GIF into the cell, and give it a WIDTH attribute
equal to the size you want in that cell. Now the cell will have the exact dimension
you want. This works just as well to control vertical dimensions as well.

If you are using shim GIFs, watch out that you do not cause other
problems. One major problem is creating a page that is too wide to fit the screen.
When that happens, the browser will create a horizontal scroll bar to let the
viewer scroll to the rest of the page. The problem is that many times people
will not use the scroll bar. They will just think something is wrong with the
page and go somewhere else. I design all of my pages to fit in a window 600
pixels wide, so they will fit a standard VGA screen. If someone views the page
on a computer with a higher resolution, they may see some additional white space
on the page, but that doesn’t bother me in the least. White space is good. White
space is your friend.

Shim GIFs are most commonly used with tables for the reasons given
above, but they can be used in any situation where you want to adjust spacing
for some reason.