Chapter 37. Using Background Images in Table Cells

You probably know that you can place an image inside a table cell, like this:

 <td><img src="/books/2/30/1/html/2/mercury.jpg" width="200" height="200"></td> 

You probably also know that you can set the background color of a table cell, like this:

 <td bgcolor="#FF0000">Behold, the planet Mercury</td> 

But did you also know that you can use an image as the background of a table cell? It works like this:

 <td background="mercury.jpg" width="200" height="200">Behold, the planet Mercury</td> 

Doing it like this allows you to superimpose HTML content, as Figure 37.1 shows.

Figure 37.1. When you use an image as the background of a table cell, you can superimpose HTML content.

TIP

The width and height attributes of the td tag describe the size of the table cell, not the size of the image. Older browsers may clip the size of the cell to match the amount of content it contains, even when you specify precise width and height values, which can crop your background image.

Listing 37.1. View Source for Figure 37.1.

 <table>   <tr> <!-- Set the valign attribute to bottom to push the text to the bottom of the table cell. -->     <td valign="bottom" width="200" height="200"         background="images/mercury.jpg">       Behold, the planet Mercury     </td>   </tr> </table> 

This technique works best when the amount of content you want to superimpose is not likely to cause the table cell to expand beyond the width and height values of the image. Otherwise, the browser tiles or repeats the image to fill the extra area, as in Figure 37.2, which may not be the effect you want to achieve.

Figure 37.2. If the size of the cell expands beyond the size of the background image, the browser tiles the image to fill the extra area.

GEEKSPEAK

Tiling is repeating an image to fill a given area.

TIP

Make sure that your text is legible against the background image, unlike the examples in this topic. One of the most common design problems on the Web is poor contrast between foreground and background. If you can't find a color or style of text that stands out enough from the background image, don't use a background image.

Listing 37.2. View Source for Figure 37.2.

[View full width]

 <table>   <tr> <!-- You don't need to specify the valign attribute here, since the text fills the  200-by-200 cell. -->     <td width="200" height="200" background="images/mercury.jpg">       <p>Behold, the planet Mercury. It is one of the hottest places in the solar system  due to its proximity to the sun.</p>       <p>The planet Mercury is a small, arid, lifeless, desolate, sun-baked excuse for a  heavenly body. Hardly anyone bothers to study it.</p>       <p>Its only notable quality is the speed with which it orbits the sun, from which it  derives its name. In Roman myth, Mercury, with wings on his heels, was the messenger of  the gods, a divine postman and errand runner, the swiftest of deities.</p>     </td>   </tr> </table> 

Unfortunately, HTML doesn't give you additional attributes for fine-tuning the behavior of background images, but CSS does (see Topic 38).