HTML Code Tutorial

Background Images in Tables

For browser compatibility background images should be placed using the inline background attribute:
background="image_name"

Tags that accept the background attribute are:
<table>(IE, Moz)
<th>
<td>

This image (spacer_black.gif) was used in the table below as a background image to produce the black border around the cell content.

Heading

Column 1

 Column 2

The code below shows how to place the background image and set the color within the tags that accept the bgcolor attribute, to produce the table exhibited above..

<table background="http://www.createafreewebsite.net/images/spacer_black.gif" width="200" cellpadding="12" cellspacing="1" border="0">
<tr><th colspan="2" bgcolor="#00FF00">Heading</th></tr>
<tr>
<td ><p STYLE=" color :#7F7F7F;background-color :#FFFF00">Column 1</p></td>
<td bgcolor="#FFFF00">Column 2</td>
</tr></table>

Note: If you are viewing this page in a Netscape browser the appearance of the table will be quite different than that of the IE display.

Using Inline Style Sheets

Similar results can be obtained using Inline Style sheets. There are still problems with browser compatibility using this method in tables. The code and resulting table, below.

<table STYLE="background-image : URL(images/blue_ball.gif)" width="200" cellpadding="2" cellspacing="15" border="0">
<tr><th bgcolor="#FFFFFF" colspan=2">Heading</th></tr>
<tr align="center" valign="top">
<td bgcolor="#FFFFFF">Column 1</td>
<td>Column 2</td>
</tr></table>

Heading
Column 1 Column 2

When using background images in tables or as page backgrounds, be sure to choose them wisely. One of the most common errors in web page design is the use of busy or dark colored backgrounds that conflict with text.

In the example above the proper use of a busy background is demonstrated in the heading and Column 1. Improper use is demonstrated in column 2.