WEB DESIGN GARAGE [Electronic resources] نسخه متنی

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="/image/library/english/10077_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="/image/library/english/10077_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.

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//image/library/english/10077_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.

Listing 37.2. View Source for Figure 37.2.

<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//image/library/english/10077_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).