Load Time Tip:
Replace GIFs With Colored Table Cells

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Colorful images add visual interest to Web pages, but they also increase download time. With careful use of colored table cells though, you can often keep the color while decreasing page load time. Images take time to download, but browsers can render color immediately. Use colored table cells to replace large blocks of color on your page.

Create Page Backgrounds With Tables

One of the more common page layout formats is a colored sidebar on the left or right-hand side of the page that contains navigation information, ads, links to other sites, etc. Go to any of the Web sites that offer free background images and you'll find that this is one of the most popular styles.

Although background images can be quite complex, most are simple tiling images that have a relatively small file size. But suppose you don't like the colors, the styles, or don't have the time to look for the perfect one? You can create this same effect yourself using table cells.

The key in this example is to use the ROWSPAN attribute inside your TD tag. If you want the sidebar to go the length of the page, then always be sure that ROWSPAN equals the total number of rows in the table. More complex layouts may call for a mixture of ROWSPAN and COLSPAN attributes.

Setting attributes in the opening BODY tag is important for browser compatibility. Because Netscape and Explorer support different tags, you'll have to use all four margin attributes if you want the table borders to extend to the top and left margins of the page.

Note that we created 2 different TD tags with a colored background. The navy is the main section, while the black bar provides a clear break between the sidebar and main content section. Here's how it looks

Although this is a simple example, you can get much more creative and use the same technique to create complex sidebar and border combinations.

Simple Navigation Bars

You can also use a colored table background to replace an image map. This only works for simple image maps. If your current navigational image map is irregularly shaped, has custom buttons, or other distinctive elements, then a colored table background isn't an option.

However, if you've created a simple image map with the text in all one color and a rectangular background, then you can probably get the same effect using tables. We used the same basic layout as before, but included text for navigation links in the sidebar like this.

Note that we set VALIGN="top" to ensure that the navigation text will always display when the page loads - even if the content section is quite long. But that places the links at the very top of the table, so we used several BR tags to move it down a bit. For better control, you could place each link inside its own table cell, use borders, or nest tables.

A Few Warnings

Always remember to keep your ROWSPAN and COLSPAN attributes under control. Lay the page out on paper before you begin to code the table. It's dangerous to try to add columns and rows after the fact: your page may have big patches of colored table cells where you aren't expecting them.

There are a few other things to consider before tossing out your image maps:

Link Colors: Make sure that your hyperlink color and visited link color (LINK and VLINK) coordinate with both your table cell color and page background color. Don't deviate too much from standard link colors or you could confuse visitors.

Nested Tables: You can often get the most attractive layout results when you nest a smaller table inside your main table. Don't overuse the technique though: it can increase page download time and confuse some browsers. It's better to split up your tables on the page.

Layout Control: You have absolute control over spacing and layout in a GIF because it always displays the same. HTML is not as reliable, so you may have to use some BR tags, spacer GIFs, or other techniques to control the display and position.

Netscape Issues: Netscape doesn't display empty table cells or their background color. Be sure to include a non-breaking space or single-pixel gif inside table cells you want to display as borders.

Still, colored table cells are often a good way to create visual interest and use color on your site without sacrificing download time. The faster your page downloads, the better because you could lose up to one-third of your visitors if the page doesn't display in 8 seconds. Every second you save helps keep visitors on your page.

Do you know how fast your pages download? NetMechanic's HTML Toolbox will check the download time of your Web pages and alert you to HTML problems that can effect page download time.