Table Backgrounds: Color

The background color of a table can be set using styles. As with any backgrounds, it's important to set the color of the fonts as well as the background. This used to be very difficult, requiring the repeated use of the <FONT ...> tag to set the font colors of every cell. Styles have greatly simplified the process by allowing all the colors to be set in one place.

First, let's set the style rules. The following code creates a styles class called tealtable. This style sets the background color to teal and the font color to white. This code should be copied into the <HEAD> section of your page.

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

Now that we've created the styles we just apply it to a table. We associate the table with the tealtable class with the CLASS attribute. Notice in the following code that we don't any any code to the table cells the make the fonts white. The fonts are automatically white because of the style rules we set.

<TABLE CELLPADDING=5 CLASS="tealtable">
<TR> <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

The third line down in the style code deserves a few words of explanation:

.tealtable, .tealtable TD, .tealtable TH

Netscape doesn't interpret styles code quite correctly when thay are applied to tables. To compensate for this problem we set rules for three different types of elements: any element associated with the tealtable class, <TD ...> elements inside tealtable elements, and <TH ...> elements inside tealtable elements. This works around the Netscape problem.