Idocs Guide to HTML

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.

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.