Table header font colors

[sufax]

Is it possible to have multiple font colors in the same table header?

I have an Address column in my data table that has color coded entries based on where the address is. North = green, South = red and West = blue. What I want to do is the following but the color changing code doesn't work for me:

<th> [B]Address[/B]<br/>
<font color=green/>[B]North[/B]&nbsp;&nbsp;&nbsp;
<font color=red/>[B]South[/B]&nbsp;&nbsp;&nbsp;
<font color=blue/>[B]West[/B]
</th>

So the table header would read like this:

Address
North South West

and the font color would be different for all 4 words in the header.

Can it be done?

Thanks,
Sup

<th> Address<br/>
<font color=green/>North&nbsp;&nbsp;&nbsp;
<font color=red/>South&nbsp;&nbsp;&nbsp;
<font color=blue/>West
</th>

YUk! FONT tags!

<th> Address<br/>
  <span>North</span>&nbsp;&nbsp;&nbsp;
  <span>South</span>&nbsp;&nbsp;&nbsp;
  <span>West</span>
</th>

It's a good idea to separate logic abd presentation ar far as possible.
Put this in a css file or inside style tags in the head area:

th span{
  color:green;
}

th span + span{
  color:red;
}

th span + span + span{
  color:blue;
}

[ko ko]

You can also use span tags and class for the multiple font colors.
Here:

<th> Address<br/>
       <span class="green">North</span>&nbsp;&nbsp;&nbsp;
       <span class="red">South</span>&nbsp;&nbsp;&nbsp;
       <span class="blue">West</span>
</th>

CSS:

.green {
   color: green;
   }
.blue {
   color: blue;
   }
.red {
   color: red;
   }

You can also use span tags and class for the multiple font colors.
Here:

<th> Address<br/>
       <span class="green">North</span>&nbsp;&nbsp;&nbsp;
       <span class="red">South</span>&nbsp;&nbsp;&nbsp;
       <span class="blue">West</span>
</th>

CSS:

.green {
   color: green;
   }
.blue {
   color: blue;
   }
.red {
   color: red;
   }

While you can do this, you are combining logic and style, or perhaps more correctly, your markup starts to suffer from classitis. A designer may want to change the red colour to orange. In this case, the markup would stop making sense. If you use 'descendants' in css, you can avoid this from happening - you just change the css.

[sufax]

As you probably can tell, I am a novice at html and css.

I changed my th code to this as both of you suggested:

<th> Address<br/>
       <span class="green">North</span>&nbsp;&nbsp;&nbsp;
       <span class="red">South</span>&nbsp;&nbsp;&nbsp;
       <span class="blue">West</span>
</th>

My page has an external css file. I first tried adding this code in the head section of my page.

<style type="text/css">
.Green {
   color: #659D32;
   }
.Blue {
   color: #4f6b72;
   }
.Red {
   color: #810541;
   }
 </style>

When the page opens, the colors flash correctly for a split second and then revert to the regular color.

Then I tried adding this code to my css file:

.Green {
   color: #659D32;
   }
.Blue {
   color: #4f6b72;
   }
.Red {
   color: #810541;
   }

and nothing happens at all.

What am I missing here?

Thanks for the help,
Sup

First of all, I didn't suggest you use classnames, but anyway, you've used capital letters in your css but not in the html.

[drjohn]

Also, it is very bad practive to colour code something to give it meaning. what happens when someone with a colour deficiency views the page? 8% of men have some form of colour blindness, and then you have the screen itself - one of my sites seems to have a pink background on one monitor and yellow on another that I use.

So do try to avoid using colour for special meanings, it is a bad idea. Ask any usability engineer - Oh I've just answered before the question was asked...

[sufax]

Thanks for all of your replies. I appreciate the help and advice.

I've tried Ardav's <span> example without class using the css span, span + span, etc. both in the head of my page as well as the external css file. That didn't work.

I've tried Zero13's <span class> example with css style in the head of my page and in the external css file. That works for a split second when the page opens, but immediately reverts to the default color.

Ardav, I didn't mean to 'dis' you by using the class example. I just saw the class example as more flexible in the unlikely event that I would someday use this code in more than one place on the page and not necessarily want the same color/style in different places.

drjohn, I hear you on the color issue. I don't think it will be an issue in my case. If I do continue to try to work this out, I will likely change the color change to a font or font style change.

This is a little extra that a user suggested as a convenience when he is glancing over the info on the page. Again I am a novice at table layout and I guess I made the invalid assumption that a simple font color tag in the html would override the css. I guess I was wrong.

I know there are often many ways of accomplishing the same thing. If someone has another suggestion for me I would appreciate it.

Thanks,
Sup

Strange - my version works for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blah blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
th span{
  color:green;
}
th span + span{
  color:red;
}
th span + span + span{
  color:blue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Address<br/>
  <span>North</span>&nbsp;&nbsp;&nbsp;
  <span>South</span>&nbsp;&nbsp;&nbsp;
  <span>West</span></th></tr></thead><tbody><tr><td>try it</td></tr></tbody></table>
</body>
</html>

DO you have any javascripts or any other css files linked to the document?

By the way - no offence taken. You do it the way YOU want. There are ways and there are ways.

[sufax]

Thanks to Ardav I have isolated the problem. I do have both javascript and external css associated with the page. It is the javascript that is causing the problem. When I add only the css, it works fine. When I add the javascript alone or with the css I lose the color change.

I'm going to try to add a cell below the address header and put the color or font change in there. Wish me luck.

Thanks very much for the help,
Sup