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.
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.
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). |