Table Background To add an image of your choice into any of the cells in your table is very easy, but should be used with care so you don't distract the visitor from what you are trying to tel them. Having said that, it can look very nice!

The work is carried out in the <TD> tag, and all you have to do is add the words <TD background="yourimage.gif"> where 'yourimage' is the name of the picture or graphic you want to place in the table.

Here's an example, start by outlining your table:

Which looks like this:

<table border="1" cellpadding="2" cellspacing="2" width="90%">
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</table>

But you knew that already didn't you? Now let's add an image to the left-hand side of the table:

I have changed the font colour for the left hand cell so the word 'left' shows up easier, but you get the general idea. It is also a good idea to dictate the graphic size, otherwise you will get multiple images. Here's the coding:

<table border="1" cellpadding="2" cellspacing="2" width="90%">
<tr>
<td background="images/surfer1.gif" width="46" height="48">Left</td>
<td>Right</td>
</tr>
</table>

The 'surfer' graphic is actually 48x48 pixels, but because I have a cellpadding of 2 pixels, I have to allow for this as the cellpadding increases the available space by 2 pixels. Therefore I have shown the graphic as being 46x48 pixels, otherwise 2 pixels of the 'overflow' would show through like this:

See the start of the overflow picture on the right-hand side of the box? An alternative is to have the cellpadding set at '0', and the right graphic size shown, so you would then have this:

<table border="1" cellpadding="0" cellspacing="2" width="90%">
<tr>
<td background="images/surfer1.gif" width="48" height="48">Left</td>
<td>Right</td>
</tr>
</table>

If you don't dictate the size of the graphic, this is what happens:

It looks like an internet café seen through a letter-box! By default the <TD> boxes make themselves 50% of the table width. The ideal solution to placing a graphic in the <TD> is to select a graphic (or make one) that you know will be the same size as the intended <TD> 'box', but that isn't always practical. Experiment and see what you can do, at least now you know the theory!

But you don't have to use graphics from your collection for a background - use a specially made background image! On the next page I will show you how to change the font colour to allow for varying background colours. For both ideas, Please click here.