RossOlson.com

Layers With Simple HTML: Tips for Tables

TD bgcolor="..." and background="..."

Now that we've got our placement and width set, we can get down to the content. All of the lessons we learned about page background colors and images can be applied to table cell backgrounds.

Any time a cell's background image is being set, it's a good idea to set the background color for that cell as well. Again, what will happen is that the color will be displayed before the background image is loaded and comes into view.

Next you can add a background to the cell. Here's two techniques that might be of interest: 'semi-transparent' backgrounds and expanding graphics.

Semi-transparent Backgrounds

Because GIFs can be transparent, they can be any shape we want them to be. However the transparency can only be completely on or completely off for each pixel. In order to get a cell background that 'screens' or provides a semi-transparent layer to the layer just below, we can create a grid of alternating transparent and non-transparent pixels. This sort of screen can be seen here: Semi-Transparent Backgrounds.

Expanding Graphics

Take a look at these two graphics:

This is a single set of images that can expand and contract to take up a flexible amount of space on a page. Here's how the table looks with the various borders turned on.

and here's a description of each image:

	The Tile in the Middle. This is the image that sits in the middle cells and actually does the work of expanding and contracting. Notice how perfectly it tiles. The tile itself is simply a set of horizontal lines.
	The End Caps. These images provide the endings of the Tile in the Middle. Notice how perfectly they smoothly meet the Middle Tile no matter where the middle tile ends. Also note that I've left a margin around the right and the bottom of the tiles. Because it's difficult to get table cells to be exactly the size we want them, having this margin of error allows the graphic to work in a larger variety of page sizes.
	The Title Image. Because the images are in the background, we can put images in the contents of the cells as well. If we keep the Title image the same height as the active area of the background, we can attain some reasonable accuracy in terms of it's placement. Also note that the graphic has a slight 'halo' around it that allows it to blend into the graphic in the background.

Now that we've discussed some of the things we can do with backgrounds and tables, let's discuss some of the things we can't do.

[Next page]

Article Contents:
Page 1 Introduction
Page 2 The BODY
Page 3 TABLE Alignments and Widths
Page 4 The Backgrounds
Page 5 The Limits [Next]