|
HTML Tip:
Avoid Table Background Image Bugs
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
If a colored table background looks great, won't an image background really make your table stand out? It might. Colors are relatively reliable across browsers, while browser incompatibility makes table background images more risky than they appear at first glance.
Internet Explorer fully supports background images in tables. Netscape Navigator displays them, but you could be unpleasantly surprised by the result.
A Table Background Image Primer
Developers frequently use colored table backgrounds to add visual impact and interest to Web pages. In forms, background colors that delineate text fields from input fields make the form easier to read and understand.
Of course, color is one way to attract attention, but pictures can be even more effective in enhancing the look and feel of your site. For instance, a site devoted to movies might use popcorn as a table background image.
Both Explorer and the Preview Release 1 of Netscape 6.0 fully support the use of background images if you use the inline style sheet attribute "STYLE". Keep in mind though, even when the full version of Netscape 6.0 is released, it will take years for most Netscape users to upgrade.
Sample Techniques For Background Images
Review the following techniques before you include a table background image on your Web page. Each one will display a background image - and each limits your options in different ways. Your choice should depend on your audience, their browsers, and the table's function.
- Internet Explorer-specific code
- Single cell tables
- STYLE attribute
|
Internet Explorer-specific Code
At first glance, this is the obvious method. However, use it only if the vast majority of your visitors use Explorer (in a company Intranet, for example). In Netscape, your table display will be a mess. Yes, it will catch the eye - but for the wrong reason.
<TABLE BORDER="0" CELLSPACING="0" WIDTH="50%"
BACKGROUND="your_image.gif">
|
- Explorer displays the image as you expect - a single background picture. NOTE: Explorer will tile the image if the width and height of your table exceeds the size of the image.
- Netscape displays the image inside each separate field of the table. If your table definition includes 4 columns and 5 rows, then the same slice of your image will repeat 20 times (once in each field).
|
Internet Explorer
|
Netscape
|
The difference is striking.
The Single-Cell Table Option
You CAN work around the Netscape problem described above by creating a table with only one row and one column. However, without TD & TR tags, the browser decides how to display the table's content. The table background looks fine, but Explorer and Netscape rarely display the content consistently. If your table contains a lot of text or FORM elements, the unreliable display can make your layout look very confusing to visitors.
Note: The obvious solution at first seems to be nested tables: nest a multi-cell table inside a single-cell table that has a background image attached. Unfortunately, in Netscape, the nested table inherits the background image from the single-cell table and displays the image in each individual cell.
The STYLE Attribute Is A Better Option
There is a partial solution: use the STYLE attribute to include your table background image. The image will display perfectly in Explorer and Netscape 6.0 - without confusing Netscape versions 4.x and below.
STYLE is an inline style attribute that is tied to this specific TABLE element only. Browsers that don't recognize CSS commands will ignore it in the table and still display the rest of the page as you expect.
<TABLE BORDER="2" CELLSPACING="0" WIDTH="50%"
STYLE="background-image:
url('your_image.gif'); border:
2 ridge #800000">
|
The results:
- Explorer displays the image and tiles it if the table is larger than the image.
- Netscape 4.x and below ignores the image completely, but still displays the table contents as you have them defined.
- Netscape 6.0 displays the image and tiles it if the table is larger than the image.
|
Consider Using Background Colors Instead
Table background colors are your most reliable option until the vast majority of your visitors use either Explorer or Netscape 6.0. Colors load more quickly and display more consistently across browsers. Base your decision on your site's design and expected audience - and remember to ALWAYS test your site in multiple browsers (and browser versions) before you post it!
|
