Table Background Images

One of the problems with using images as backgrounds to tables on your web page is the inconsistent way that these images are handled by the different web browsers. Let's look at an example table with a background image. In this case I'll show the borders so that you can see clearly what's happening but the same will happen if you set the borders to zero. I'll make the table two columns wide and five rows deep and I'll deliberately use an image slightly larger than the table so that it doesn't need to be tiled.

The traditional way of coding the background statement (which all of the current browsers support but which is no longer a part of the HTML standards) gives us a table defined as follows (I've put five non-breaking spaces above one another in the first cell of each row and one in the other column to represent the data content that would normally go there):

 <div class="centre"><table background="img/thirlmerc.jpg"
width="400" cellspacing="5" cellpadding="5" border="1">
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
</table></div>

If you view this table with Internet Explorer, Opera, or Netscape 6 then the image fills the entire table. Netscape 4 doesn't get it right. The top left corner of the image will be repeated in each table cell and the space between the cells would be left blank. Even nesting the table inside another table can't fix the problem as Netscape 4 insists on repeating the image every time it gets to a <td> statement. Nesting the table fills the borders of the inner table but you end up with a jumbled mess.

Let's try replacing the obsolete background parameter with the stylesheet parameter that has replaced it in the HTML standards. Now we've got:

 <div class="centre"><table 
style="background-image:url(img/thirlmerc.jpg)"
width="400" cellspacing="5" cellpadding="5" border="1">
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
<tr><td width="50%">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</td> <td width="50%">&nbsp;</tr>
</table></div>

If you view this table with Internet Explorer, Opera, or Netscape 6 then the image still fills the entire table. Now Netscape 4 doesn't even recognise that there is a background to be displayed and so you get the table without any background image at all, in most cases a much better solution than the messed up background that the other method produced.

Oh, and if you're wondering what the table generated from this code looks like in your browser, here it is (of course you'd usually use a less obtrusive image for the background so that your visitors can still read the table content):

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate