Idocs Guide to HTML

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. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.