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 |
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.
InMotion Web Hosting Customer Support
M-F 8am - 7pm PST
213-239-0050
More information can be found at the
InMotion Hosting Main Site |
|
|
