Table Cell Backgrounds

Robert Hess
Developer Relations Group
Microsoft Corporation

January 10, 1997

Tables weren't part of the HTML 2.0 specification. They were first introduced as a feature in the HTML 3.0 proposal, which never really got off the ground. It wasn't until HTML 3.2 that tables officially became an approved element of Web pages.

Prior to the HTML 3.2 specification, many browser creators had seen the table proposal and decided to support this feature in their browser. Originally, tables were used to display tables of numbers or text on a Web page, but it didn't take long for Web page designers to realize that an invisible table could help them a lot with page layout.

In Internet Explorer 2.0, Microsoft added full table support and also included some attributes to help designers control the coloring of a table and its cells. You can use the BGCOLOR attribute to set the individual color for any table, as well as any cell within a table. Also supported are the attributes BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK, which allow Web page designers to change the color of the beveled border that is drawn around the table and cells (if the border is turned on).

(Editor's note: Please note that some of the examples below won't be displayed correctly in Netscape Navigator.)

For any of these attributes, you can specify any valid color value; either a hexadecimal value, (example: <TD BGCOLOR="#FF3300">) as I do here to achieve a rainbow effect:

Or, you can specify one of the 16 VGA color names (example: <TD BGCOLOR="Maroon">), which I list here:

The 16 VGA Colors
Black	Silver	Gray	White
Maroon	Red	Purple	Fuchsia
Green	Lime	Olive	Yellow
Navy	Blue	Teal	Aqua

If you think that list of color names is too short, you can use one of the X11 color names, which I've documented on another Web page.

Starting with Internet Explorer 3.0, Microsoft added support for the BACKGROUND attribute in tables and table cells, which enables you to supply a GIF or JPEG image that is tiled into the background of the table. With this attribute, it is easy to create some interesting effects.

	S	tarlight, star bright, first star I see tonight, I wish I may, I wish I might, have the wish I wish tonight.

In the example above, I use the BACKGROUND attribute of the table to set the dim starry background, a small image that is tiled throughout the table. I then use the BACKGROUND attribute of a table cell to set the bright star as a background. The bright star is a GIF file with transparency, so the dim starry background shows through and blends well. I place the first letter of the poem in that same cell, which allows it to layer over the two images. In the next table cell I complete the poem. The result is a nicely framed poem that otherwise would have to be rendered as a full graphic image to get this effect.

You can combine the effects of the BGCOLOR and the BACKGROUND attributes to get effects like the following:

	Remember:   No matter where you go,   there you are.

I set a marbled background for the entire table, and because this is a transparent GIF file, I also use the BGCOLOR attribute to make it a silver-colored marble. I then add a quote to the inside of the table, and set the BGCOLOR attribute of this cell to "white" (without setting a background image) so the quote is readable.

Now let's combine all of this to form the following checkerboard:

I set the table's background image to marble, and the background color to black, which gives us a nice dark edge around each of the board squares. For each cell of the checkerboard, I set the background image to the same marble image, and the background color to either silver or red. The color assigned to the cell properly shows through the transparent portion of the image and the marble image tiles nicely throughout the board. This is because the origin of all table-cell images is adjusted for the upper left corner of the entire table. Now insert the appropriate checker image into the table cell, and we have our full game board.

Did you find this article useful? Gripes? Compliments? Suggestions for other articles? Write us!

Back to top