<<< Home << Web < HTML Notes Top Bottom < Prev Next >

Background Images in Tables

Topics on this page:

  1. background in the <table> tag
  2. background in the <td> and <tr> tags
  3. Animated backgrounds

Top <table> <td> and <tr> Animated Bottom

background in the <table> tag

IE 3+ and Netscape 4+ support background images in tables. At the time of this writing, Netscape 5 has not been released, and I don't know whether it will behave differently than Netscape 4. When I talk about Netscape here, I mean Netscape 4.

IE and Netscape handle background images quite differently from each other. Here's an example of a table with a background attribute in the <table> tag: 

<!-- Table to illustrate backgrounds -->
<table border="3" cellpadding="0" cellspacing="0"
       background="lily.jpg">
  <tr>
    <td width="100" height="50"> &nbsp; </td>
    <td width="100"> &nbsp; </td>
  </tr> <tr>
    <td height="50"> &nbsp; </td>
    <td> &nbsp; </td>
  </tr> <tr>
    <td height="50"> &nbsp; </td>
    <td> &nbsp; </td>
  </tr> <tr>
    <td height="50"> &nbsp; </td>
    <td> &nbsp; </td>
  </tr>
</table>

Here's a couple of screen shots (IE 3 on the left, Netscape 4.5 on the right):

Background in IE 3 Background in Netscape 4.5

Whoa! What happened here? IE tiled the background throughout the table as a whole. But Netscape placed the background image separately into each cell. If you're contemplating using a background image in a table, you'll want to be aware of this difference.

I tried to make Netscape show the tiled image throughout the entire background like IE does by putting the background into a one-cell table, and placing the other table inside of it. 

<!-- Table to illustrate backgrounds -->
<table border="3" cellpadding="0" cellspacing="0"
       background="lily.jpg">
  <tr> <td>
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="100" height="50"> &nbsp; </td>
        <td width="100"> &nbsp; </td>
      </tr> <tr>
        <td height="50"> &nbsp; </td>
        <td> &nbsp; </td>
      </tr> <tr>
        <td height="50"> &nbsp; </td>
        <td> &nbsp; </td>
      </tr> <tr>
        <td height="50"> &nbsp; </td>
        <td> &nbsp; </td>
      </tr>
    </table>
  </td> </tr>
</table>

I was very susprised with the result:

Netscape 4.5

Since the inner table has border=0, no rules are shown between the cells. But the stupid browser still managed to fill in the backgrounds individually in the cells. (IE showed this table just like it did the other one, except without rules.)

It turns out that the inner table "inherits" the background from the outer table, so the result is the same as if I had specified background="lily.jpg" in the inner table's <table> tag. To cancel out this inheritance, add background=""> to the inner table's <table> tag.

The following three examples look identical in Netscape and IE - these snapshots are Netscape 4.61. One warning - this only works if the outer table specifies background and NOT bgcolor. If both background and bgcolor are specified, the bgcolor will show up in Netscape while the image will show up in IE.

Netscape 4.61

The outer table has border="3" and the inner table has border=0. No rules are shown.

Netscape 4.61

The outer table has border=0 and the inner table has border="3". Rules are shown.

Netscape 4.61

Both tables have border="3", giving a little fancier border around the whole thing.


Top <table> <td> and <tr> Animated Bottom

background in <td> and <tr> tags

I expected bgcolor and background to work like in the <body> tag - background would override bgcolor. But I guess that's too logical. The results depend on the browser.

If you include background in the <table> tag but include bgcolor in a <td> tag:

  • IE 3+ - The cell shows the bgcolor and not the background image.
  • Netscape 4 - The cell shows the background image.

If you want Netscape to show the bgcolor in the cell, you have to add background="" to the <td> tag.

Another difference - IE does not support a background attribute in the <tr> tag. Netscape does support this, and places the background image into each cell of the row.

Netscape 4, and IE 3+ support a background attribute in a <td>.


Top <table> <td> and <tr> Animated Bottom

Animated Backgrounds

The background images in a table can be animated gifs. Netscape 4 and IE 4 show the animation. IE 3 won't show the animation, but should show the first frame of the animation.

Netscape 3 won't show anything - but that's because it doesn't support background images in tables at all. (I guess you could at least say that it's support of animated gifs is just as good as it's support of non-animated ones!)


<<< Home << Web < HTML Notes Top Bottom < Prev Next >