Tables II: Table Size

I tell my classes that HTML is like music.

When a composer writes a score, it is a combination of notes and symbols that can be performed by the Berlin Philharmonic or by your Uncle Fred on his harmonica. Same notes: different sound.

When a Web designer uses Hypertext Markup Language the principle is the same. HTML is designed to be played on a variety of instruments: big and small screens at high and low resolutions; PCs and Macs and even cell phones; on Internet Explorer and Netscape Navigator. It adapts. Same code: totally different look.

This is critical to understand when you are using tables.

Tables were intended to be used like spreadsheets: containers for tabular data. That didn't last long. The artistic bunch quickly figured out that tables could be used to control layout. Want three columns? Use tables. Want to divide a graphic so that different sections link to different URLs? Use tables. Want blank space? Use tables.

This is where the tricky bit comes. If you're using a table for data, looks aren't that important. If you're using table for layout, looks are everything.

Let's go deeper.

One of the attributes, or parameters, in the <TABLE> tag is width. One way to set the width is by the number of pixels: <TABLE WIDTH="700">. This works fine if the person viewing your Web site has their screen resolution set at 800x600. Their screen is 800 pixels wide and the table is smaller. What happens if they have a very hi-res setup, say, 1280x1024? Your table will take up about half the screen. That might be the effect you are trying to achieve. Or not.

And if they have an older computer with 640x480 resolution? Your entire Web page will have a horizontal scroll bar and the bottom of the browser to capture those final 60 or so pixels. The table will slop off the right edge of the screen. This is dysfunctional and ugly. Most people don't even realize that they have a horizontal scroll bar, yet alone use it.

A more elegant way to handle table width is by percentages: <TABLE WIDTH="85%>. At 800x600 this will be about the same as WIDTH=700. At 640x480 it will be 544 pixels wide. At 1280x1024 it will be 1088 pixels wide. It grows and shrinks to accommodate the screen size and resolution.

The table width will be overridden by a graphic or other filed-width element. If you plunk an 800 pixel wide graphic into a 700 pixel wide table, the table's going to be 800 pixels wide.

That's fairly straightforward. Where it gets tricky is when you start specifying the width of columns within a table.

Column width can be specified within the <TD>, table data, tag. If you don't specify a width, the column will be wide enough to contain all of the data, no wider. If you have, say, three columns of dense text, the browser will probably make them all the same width.

In theory, <TD WIDTH="200"> will create a column 200 pixels wide. In theory, <TD WIDTH="25%"> will create a column 25% of the total table width. Ah, life should be so easy.

Different browsers handle tables differently. In general, if you set the width, at 200 for example, the column will be no wider than 200 pixels. Text will wrap. However, if you put something in it bigger than 200 pixels (like a 300 pixel wide graphic) it will be as big as the biggest thing. If the content of the column is smaller than 300 pixels (say, one word) it will probably be only as big as that one word. Drat!

There is a way around it: the transparent GIF. If you have a column that needs to be at least a particular width you can force it out to that size, even if there is no data in the column at all, by stretching it with an invisible graphic.

The Image tag allows you to specify the size of a graphic: <IMG SRC="cleardot.gif" WIDTH="200">. Even if the graphic is only one pixel wide, it will stretch out to 200 pixels. This would look weird if it was a photo of your Uncle Fred (he of the harmonica) but if the graphic is invisible you don't have to worry about distortion.

You can download an invisible gif of your own here:

Right-click in the middle of the seemingly empty box on the left. This is the invisible dot! Save it as dot_clear.gif onto your hard drive to be used when needed. It must be a GIF: a JPG cannot be made transparent.

If you have to ensure that a column is at least a particular width, insert the invisible dot as an image and set the WIDTH attribute to that number of pixels; set the height to 1. Although this is typically used to specify width, it can obviously be used to specify a particular height as well: <IMG SRC="cleardot.gif" WIDTH=200 HEIGHT="200"> will create an apparently empty box, 200 pixels square. If you use the invisible dot be sure to include an empty alternative text attribute and to specify that there is no border: <IMG SRC="cleardot.gif" WIDTH="200" alt="" border="0">. This will prevent the secret dot from revealing its presence.

One more attribute. If you have two or more columns that you want to have equal width, set the attribute as *. All columns with this attribute should have equal widths: <TD WIDTH="*">

It's important to get the math right. If you don't, the browser will try to sort it out itself and the results may not be either logical or pleasing.

Webmasters have coined the term "liquid design" to describe tables that grow or shrink according to screen size and resolution. The way to do this is to leave the width attributes in at least one of the <TD> tags in a table blank.

In a three column design you might have the far left column contain a specified width, by using a clear dot and/or specifying the width so that the text on the page clears a background graphics that has a left border (for examples of left border background graphics visit Boogie Jack's free graphics page at www.boogiejack.com/free_graphics.html.) You can then leave the other two <TD> width attributes blank and they will auto-adjust to fit the content. Or, you could specify one of them, either using a fixed number of pixels or a percentage and leave the third one blank.

How you handle this is up to you. Sometimes, when I have an intricate design, I will use all fixed column widths (I generally design with a 800x600 screen in mind.) When the design is more flexible, the columns are liquid.

A couple of work-arounds if you are using fixed rather than liquid design: Center the entire table so that if the screen resolution is higher the additional white space will be distributed equally on both sides. Just use the center tag: <CENTER><TABLE>…</TABLE></CENTER>

Add one additional column on the right, fill it with an attractive tiled pattern, and leave the width blank: <TD background="pattern.gif">. At higher screen resolutions, the white space to the right of the table will be filled with a pattern.

If you want a pattern or color on both right and left sides, the easiest way is to add the pattern to the body tag: <BODY background="pattern.jpg" leftmargin=0 topmargin=0>. By setting the margin attributes to 0 you will avoid having a slice of the color or pattern at the top of the screen. To make your table have a white background, just specify the color in the table tag: ;<TABLE bgcolor="#FFFFFF">. Center it.

To summarize:

1. Give columns that need to have them fixed pixel widths.
2. Give other columns percentage widths.
3. Leave at least one column with a WIDTH of * (the default) so that it takes up the remaining space when everything else is displayed.