pagetutor.com - HTML tutorials for the rest of us

Background Images In Tables

Goal: Use a background image in a table.
Solution: Simple, but shows up a little differently in the major browsers.

As an experiment, we'll take this image(myback.gif)...

And use it in this table...
1 3 8 19 ?
5 14 35 80 ?
   

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1">
<TR>
  <TD WIDTH="32" ALIGN="center">1</TD>
  <TD WIDTH="32" ALIGN="center">3</TD>
  <TD WIDTH="32" ALIGN="center">8</TD>
  <TD WIDTH="32" ALIGN="center">19</TD>
  <TD WIDTH="32" ALIGN="center">?</TD>
</TR>
<TR>
  <TD WIDTH="32" ALIGN="center">5</TD>
  <TD WIDTH="32" ALIGN="center">14</TD>
  <TD WIDTH="32" ALIGN="center">35</TD>
  <TD WIDTH="32" ALIGN="center">80</TD>
  <TD WIDTH="32" ALIGN="center">?</TD>
</TR>
</TABLE>

First though, we'll kill the table borders...
1 3 8 19 ?
5 14 35 80 ?
   

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
  <TD WIDTH="32" ALIGN="center">1</TD>
  <TD WIDTH="32" ALIGN="center">3</TD>
  <TD WIDTH="32" ALIGN="center">8</TD>
  <TD WIDTH="32" ALIGN="center">19</TD>
  <TD WIDTH="32" ALIGN="center">?</TD>
</TR>
<TR>
  <TD WIDTH="32" ALIGN="center">5</TD>
  <TD WIDTH="32" ALIGN="center">14</TD>
  <TD WIDTH="32" ALIGN="center">35</TD>
  <TD WIDTH="32" ALIGN="center">80</TD>
  <TD WIDTH="32" ALIGN="center">?</TD>
</TR>
</TABLE>

Insert BACKGROUND="myback.gif" into the TABLE tag...
1 3 8 19 ?
5 14 35 80 ?
   

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" 
BACKGROUND="myback.gif">
<TR>
  <TD WIDTH="32" ALIGN="center">1</TD>
  <TD WIDTH="32" ALIGN="center">3</TD>
  <TD WIDTH="32" ALIGN="center">8</TD>
  <TD WIDTH="32" ALIGN="center">19</TD>
  <TD WIDTH="32" ALIGN="center">?</TD>
</TR>
<TR>
  <TD WIDTH="32" ALIGN="center">5</TD>
  <TD WIDTH="32" ALIGN="center">14</TD>
  <TD WIDTH="32" ALIGN="center">35</TD>
  <TD WIDTH="32" ALIGN="center">80</TD>
  <TD WIDTH="32" ALIGN="center">?</TD>
</TR>
</TABLE>

Easy enough right? Well, here's the problem... it looks different in Netscape than in Explorer. Here are screen captures:
  
  

The problem is obvious. Netscape starts the image fresh in each cell and IE continues the whole image throughout the table. All right, what can we do about it? In a word... nothing. At this time this how it is (even via style sheets).

Is it possible to get them to look the same? Sure, as long as we specify the background image for each cell...
1 3 8 19 ?
5 14 35 80 ?
   

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">1</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">3</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">8</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">19</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">?</TD>
</TR>
<TR>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">5</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">14</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">35</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">80</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="myback.gif">?</TD>
</TR>
</TABLE>

Here are captures of the result...
  
  

Oh goodie, they're the same. That still leaves this whole background image in a table thing rather useless. Not necessarily. There are two things you can do. The first, which is just a little flimsy (high likelyhood that what many people actually see is different than what you want them to see), is to cut up your background image and put the different pieces parts into each table cell as a background. When the table renders, the sum of the parts will equal the whole... hopefully... maybe. Like I said, this is flimsy, not to mention time consuming.

A better idea would be to use this technique sparingly, with images that easily lend themselves to tiling and in only one row or column at a time. Consider this pinstripe type image:. Here it is placed in the first row only.
1 3 8 19 ?
5 14 35 80 ?
   

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="mypinstripe.gif">1</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="mypinstripe.gif">3</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="mypinstripe.gif">8</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="mypinstripe.gif">19</TD>
  <TD WIDTH="32" ALIGN="center" BACKGROUND="mypinstripe.gif">?</TD>
</TR>
<TR>
  <TD WIDTH="32" ALIGN="center">5</TD>
  <TD WIDTH="32" ALIGN="center">14</TD>
  <TD WIDTH="32" ALIGN="center">35</TD>
  <TD WIDTH="32" ALIGN="center">80</TD>
  <TD WIDTH="32" ALIGN="center">?</TD>
</TR>
</TABLE>

Here's what results...
  
  

But that's not exactly what I want. Like the song says... "You can't always get what you want." And that goes double for web page authoring. Still, even with it's limitations, it's a nice little something for your growing bag of tricks.

By the way, in the tables examples, did you figure out what the next numbers in the sequences are? If so, enter their sum here and hit return. The solution is here if you need it.