Background Images in Tables

Background images can be placed in tables using inline style sheets or by making use of class or id style identifiers:
background-image: url(images/image.gif);

Tags that accept the background-image attribute are:
<table>
<th>
<td>

We'll use these images in our demonstration:

Heading
Column 1	Column 2

The code below shows the 3 methods of placing the images:

<table class="red-table" style="width: 500px; height: 200px;">
<tr><th colspan="2" style="background-image: url(images/150-culttext.jpg); height: 30px">Heading</th></tr>
<tr>
<td id="left-column"><p>Column 1</p></td>
<td><p>Column 2</p></td>
</tr></table>

The id and class identifiers look like this:

#left-column {
background-image:url(images/sandy-green.jpg)
}
table.red-table {
background-image:url(images/sandy-red.jpg)
}


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.