Table Backgrounds: Setting Individual Cells

In this page we'll look at two techniques for setting the background images of table cells. Which technique you use depends on which is more convenient to your situation.

In the first example, we'll assume that you want all the <TH ...> elements to have a certain background image, but not the <TD ...> elements. To do this we'll use similar style rules as in our first background image example, but we'll apply them to a different set of elements. In this code we create a set of rules that apply to the <TH ...> elements within a table set that is set to the deepsea class. (They also apply to any element of the deepseacell class; we'll get to that shortly.)

<STYLE TYPE="text/css">
<!--
.deepsea TH, .deepseacell
{
background-image:url('deepsea.gif');
background-color:blue;
color:white;
font-family:sans-serif;
font-weight:700;
}
-->
</STYLE>

Now we apply the rules to a table by setting the table to the deepsea class. Notice in the following code that we don't need to do anything special to the <TH ...> tags. They automatically get the styles because they are within a deepsea element,

<TABLE CELLPADDING=5 CLASS="deepsea">
<TR> <TH>Operator</TH> <TD>Starflower</TD> <TD>Melody</TD> </TR>
<TR> <TH>Ext</TH>      <TD>8172</TD> <TD>5673</TD>  </TR>
<TR> <TH>City</TH>     <TD>San Francisco</TD> <TD>San Pedro</TD> </TR>
</TABLE>

which gives us this table:

Operator	Starflower	Melody
Ext	8172	5673
City	San Francisco	San Pedro

Now suppose that you can't set the general rule that all <TH ...> elements get the styles we set. In that case we can individually set each cell that should get the styles with a CLASS attribute. We'll set those cells to the deepseacell class using the same style rules set above. Notice that in this case we don't have a CLASS attribute in the <TABLE ...> tag.

<TABLE CELLPADDING=5>
<TR>
    <TD>turtles</TD>
    <TD CLASS="deepseacell">starflowers</TD> 
    <TD>peaches</TD>
    </TR>
<TR>
    <TD CLASS="deepseacell">cats</TD>
    <TD>patchouli</TD>
    <TD>grapefruit</TD>
    </TR>
</TABLE>

which gives us

turtles	starflowers	peaches
cats	patchouli	grapefruit