Click Here
for FREE
Web Hosting!

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

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.

Recommended Resources

web hosting tutorials
Credit Help

Search the Internet
Search Engine Help

Low Fat Lifestyle
Internet Traffic

Web Hosting
Web Design

Discount Hotel Reservations

Search The Internet

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. About the author