Click Here for FREE Web Hosting!

Home >> Tables >> Table Background Colors and Images

Table Backgrounds: Rows

<TABLE ...>

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

Table Backgrounds: Rows

<TABLE ...>