Table Backgrounds: Setting Individual Cells

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