Table Backgrounds: Rows

There are two ways to set the background of a table row. If you just want to set the background color, and if you have already established the text colors of the page as something compatible, it's usually easiest to use <TR BGCOLOR="...">. If you need to ensure compatible text colors, or to set a background image it's better and more reliable to use styles.

If you have already set the page text to a color that is compatible with the background color for the row, it's easiest to use <TR BGCOLOR="...">. For example, the text on this page is set to black, so the background color for the row can be a light blue:

<TABLE BORDER>
<TR BGCOLOR="#99CCFF"> <TH>Person</TH> <TH>Food</TH> </TR>

which gives us this table:

Person Food

Starflower Stir fried tofu

Miko Vegetable rice soup

However, in many situations you need to ensire that the font color is compatible with the background color. For example, if you have a dark background you need light colors. In tht situation it's much easier to use styles. For example, the following styles create a class called darkrow that has a dark blue background and white letters. This code should be copied into the <HEAD> section of your document:

<STYLE TYPE="text/css">
<!--
.darkrow, .darkrow TD, .darkrow TH
{
background-color:330099;
color:white;
}
-->
</STYLE>

Now we apply the styles to the table row:

<TABLE BORDER>
<TR CLASS="darkrow"> <TH>Person</TH> <TH>Food</TH> </TR>

which gives us this table:

Person Food

Starflower Stir fried tofu

Miko Vegetable rice soup

To set the background image of the row we use styles. Setting the background image of a table row is done in a similar manner as for the entire table. We'll even use the same style rules as in the previous example. Copy the style code from the previous example into the <HEAD> section of your document.

We'll apply the styles to a single row by setting the row to the deepsea class. The following code adds a CLASS attribute to the <TR ...> tag of the row:

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

which gives us this table:

Operator Ext City

Starflower 8172 San Francisco

Melody 5673 San Pedro

Symphony 3820 Montreal