Home \ HTML Tutorials \ Working with Background Images and Colors

Working with Background Images and Colors

The value you assign to the bordercolor attribute in the <table> tag changes the color of the border around the table and the borders around the cells within the table—with the exception of those cells whose <td> tags include bordercolor settings of their own. Therefore, if you want the Web browser to draw a green border around a particular cell within the table—without regard to the color of the borders around other cells in the table or around the table itself—add a bordercolor attribute to the cell’s <td> tag. For example, to tell a Web browser to draw a green border around a cell you would write the cell’s <td> tag as follows:

For Internet Explorer in particular, you might specify a cell’s border colors as follows to draw the cell using green along the top and left sides and a lime (light) green along the bottom and right sides of the cell:

Although all Web browsers support the use of the bordercolor attribute in the <table> tag, many do not support the use of bordercolor, bordercolorlight, and bordercolordark attributes in <td> tags. Therefore, design your tables under the assumption that many of your Web site’s visitors will see the border around every cell in the same color(s) as the border around the perimeter of the table itself.

Because background images and colors are “attributes” of a table or of a cell within a table, you specify them (like the border attribute) as part of an HTML tag. (Web page elements, such as tables, rows, data, and so on, have HTML tags of their own, whereas attribute settings are always found within HTML tags.) Because both a table and each of its cells have a background, which you can set independently, perhaps the easiest way to understand the interaction between the table background and the background of each of its cells is to think of them as layered.

A table background is a rectangular object that lies on top of the Web page like a mat within a picture frame. The individual rectangular-shaped data areas within the table—defined by start and end table data tags (<td></td>)— are called cells. A table lies on top of the Web page background; each of the table’s cells is a rectangular object that lies on top of the table’s background. The content you place within a cell (by placing text and/or HTML tags between the cell’s start and end table data tags [<td></td>]), in turn, lies on top of the cell’s background.

When you specify a table’s background color by setting the bgcolor attribute in the table’s <table> tag, the Web browser will “paint” the color assigned to the attribute onto the table’s otherwise transparent background. For example, setting the bgcolor attribute to the hexadecimal value “#0000FF” in the following <table> tag tells the Web browser to paint the table background blue:

Similarly, if you set the background attribute in the <table> tag, the Web browser will use the graphics file assigned to the attribute as “wallpaper” to cover the table’s background. For example, the background setting in the following code tells the Web browser to cover the table background with the picture in the file named picture1.gif stored in the Web site’s images subfolder:

Because each of the table’s cells, like the table itself, has a background, you specify a cell’s background color or background image as an attribute within the cell’s <td> tag. Therefore, independent of the background image or color (if any) that you specified for the table, you can tell the Web browser to paint a cell’s background with a color by assigning the color’s value as a hexadecimal number to the bgcolor attribute in the cell’s <td> tag. For example, the hexadecimal value “#00008B” assigned to the bgcolor attribute in the following <td> tag tells the Web browser to paint the cell’s background navy (dark) blue:

Similarly, if you set the background attribute in a cell’s <td> tag, the Web browser will use the picture in the file assigned to the attribute as “wallpaper” to cover the cell’s background. For example, the background setting in the following <td> tag tells the Web browser to cover the cell’s background with the graphics image in the file picture1.gif stored in the Web site’s images subfolder:

Although HTML syntax does not prevent you from doing so, it does not make sense to specify both a background color and a background image for the same table or cell. If you specify both, whichever appears last in the <table> tag “wins”—sort of like wallpapering a painted wall, or painting over wallpaper. Whatever is applied to the background last (in other words, the layer on top) is what the viewer sees. Because they are “layered”, a cell’s background color or background image will obscure the table’s background color or image. Conversely, if a cell’s <td> tag has neither a background attribute nor a bgcolor attribute, the Web browser will draw the cell’s background as if it were a transparent pane of glass laying atop the table’s background. Consequently, you will see the table background “through” the cell’s transparent background.

Similarly, because the table’s background sits on top of the Web page background, the table’s background image or color obscures the color or picture used as the Web page background. Conversely, if you set neither the background attribute nor the bgcolor attribute in the table’s <table> tag, the Web browser will draw the table’s background as if it were a transparent pane of glass lying on top of the Web page background. As a result, you will see the Web page background “through” the table’s transparent background. By the way, although it would be a “cool” effect, if you specify neither a color nor an image for the Web page background, you will not see the inside of your monitor. Instead, the Web browser will set the background color of the Web page to either gray or white—depending on the browser’s default settings.

Although currently supported by Web browsers, the HTML standard does not allow you to use the background attribute with either the <table> or <td> tag. Moreover, the bgcolor attribute—deprecated since HTML 4.01—is officially illegal in the XHTML 1.0 standard. To specify the background image for a table or cell, current HTML (and XHTML) standards require that you use the CSS background- image property. For example, to specify an image you want the browser to use as the table background, insert a style attribute within the <table> tag as follows:

<table border="1"

style="background-image: url('/images/picture.GIF')">

Similarly, to specify the background image for a cell, use a style attribute in the <td> tag to set the background-image property as shown here:

The CSS background-color property lets you select the background color for the table background and/or the background color of any of its cells. For example, to set the table’s background to aqua, you would set the background-color property in the <table> tag as shown here:

Similarly, to set the background color for a table cell to dark blue, for example, use the style attribute to set the background-color property within the <td> tag as follows: