Background Images in Tables

Topics on This Page

Background Images in Tables
Example

Background Images in Tables

We've seen how you can specify background colors for table cells. For this, you use the bgcolor attribute. You can place bgcolor in a <td> or <th> tag to color an individual cell. You can place bgcolor in a <tr> tag to color all of the cells in an individual row. And you can place bgcolor in a <table> tag to color all of the cells in the table.

As you (hopefully) recall, IE and Netscape treat bgcolor in a <table> tag a bit differently if the table has a non-zero cellspacing. IE colors the area between cells with the background color, while Netscape does not. There's a very basic difference between IE and Netscape: IE considers the bgcolor attribute of the <table> tag to be an attribute of the table itself. Netscape, on the other hand, considers it to be an attribute to be applied to the individual cells within the table. Netscape considers bgcolor of <table> very like bgcolor of <tr>, just providing a default value for those cells that don't have a bgcolor attribute of their own.

Netscape and IE also have this very basic difference in supporting the background attribute, which lets you specify a background image for a table. IE treats background in a <table> tag as an attribute of the table and tiles the image throughout the entire table. Netscape treats background in a <table> tag as a default background for each individual cell, and places the background image separately into each cell with nothing in the cellspacing area.

Let's begin by looking at a 1-cell table. Here is the background image that we'll use:

<center>
<table border="3" cellpadding="5" cellspacing="0">
  <tr>
    <td background="images/canvas11.jpg">
      This table consists <br />
      of just a single cell.
    </td>
  </tr>
</table>
</center>

As you can see, the image has been tiled as necessary so that it fills the entire cell.

Now let's switch to an image in which we can better see the tiling:

Let's use a 2-cell table that includes some cellspacing, and we'll specify background in the <td> tags for the two cells. We'll just use empty cells so that all we'll see is the background.

<center>
<table border="3" cellpadding="5" cellspacing="8"
       width="400" height="110">
  <tr>
    <td background="images/Larry39.jpg"> <br /> </td>
    <td background="images/Larry39.jpg"> <br /> </td>
  </tr>
</table>
</center>

The background image is applied independently to the two cells. The background does not appear in the cellspacing area.

Now let's see what happens when we move the background out of the <td> cells and into the <table> tag:

<center>
<table border="3" cellpadding="5" cellspacing="8"
       width="400" height="110" background="images/Larry39.jpg">
  <tr>
    <td <br /> </td>
    <td <br /> </td>
  </tr>
</table>
</center>

In Netscape, the looks of the table hasn't changed. Netscape treats background as an attribute to apply to individual cells.

In IE, the table looks totally different. IE treats background in a <table> tag as an attribute of the table itself. The image is tiled throughout the table, even in the cellspacing area.

If you want to achieve individual background images in individual cells for all browsers, specify background for the individual cells. All browsers handle this the same.

If you want to achieve a background tiled throughout the entire table in all browsers, it's a bit more complicated. You'll have to use a nested table. The outer table is a one-cell table that specifies the background that you want. The inner table must specify background="". Without this, Netscape lets the inner table "inherit" the background attribute of the outer table and applies it to the individual cells of the inner table.

<center>
<table border="3" cellpadding="0" cellspacing="0"
       width="400" height="110" background="images/Larry39.jpg">
<tr><td>

  <table border="3" cellpadding="5" cellspacing="8"
         width="400" height="110" background="">
    <tr>
      <td> <br /> </td>
      <td> <br /> </td>
    </tr>
  </table>

</td></tr>
</table>
</center>

It's a lot more work, but it does produce the same result in Netscape as it does in IE.

NOTE: In the outer table, specify background but DO NOT SPECIFY bgcolor. If you also include bgcolor, IE will show the background image but Netscape will show the background color.

Netscape supports the background attribute in the <tr> tag, just as it does bgcolor. The background image is placed into all of the cells in that row. IE does not recognize background in a <tr> tag.

If you specify background in the <table> tag and bgcolor in the <td> tag for an individual cell, you'll run into another browser difference. IE will fill that cell with the specified background color, but Netscape will show the background image unless you also include background="" in the <td> tag.

background is not an official HTML 4.0 attribute and will cause error messages in the validator. You can, of course, use CSS rather than the background attribute. In all CSS-enabled browsers, you can use CSS to apply a background image to an individual cell. In all except Netscape 4, you can use CSS to apply a background image to <table>. Netscape 4 will apply a background color, but not a background image.

Example

Here's a table that uses CSS to apply a background image to individual table cells. Because CSS is used instead of the background attribute, this code validates successfully.