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 |
Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.
| 
