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 |
