• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 280
  • Last Modified:

Changing text color in an HTML table

I am attempting to create a table that starts off with a light green background color and dark green text and when the mouse moves over a cell, I want to change the cell to dark green and the text to bright green.  What I can't seem to cause is the initial text to be green.  If I put a <font> tag directly after a <td> tag, the color will be green but it won't change on the mouseover event.  The cell changes but the text does not.

Below is my latest attempt...anyone know how to make this work?



<table border=1 bgcolor="66CC99" width=100% cellspacing=0 cellpadding=0
                                                               >
  <tr>
    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Home</td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Clinical</td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><font color="006633"><b>Financial</font></td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Operations</td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Administration</td>

  </tr>

</table>
0
mskvarenina
Asked:
mskvarenina
  • 7
  • 6
  • 2
  • +3
1 Solution
 
tewaldCommented:
All you'd have to do is set the initial style of the cells.  See the <style> tag in the <head> section - this sets the color of all table cells to #339966 (or whatever you want).  Then your mouse events will overide the initial color value.

<html>
<head>
<title>Font Color</title>
<style type="text/css">
td {
     color: #339966;
}
</style>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" cellspacing="0" cellpadding="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Home</td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Clinical</td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><font color="006633"><b>Financial</font></td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Operations</td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Administration</td>

 </tr>
</table>
</body>
</html>
0
 
mskvareninaAuthor Commented:
tewald:  I havn't worked with CSS yet, I've been doing HTML for about a month (18 year veteran programmer now moving to web development).  One question though...for this page I have 4 tables actually and the one shown is the only one I want to effect.  Sounds like your solution would 'override' the text color for each table?
0
 
COBOLdinosaurCommented:
put this in the head

<style>
   .class1 {background-color:#339966;color:#33ff99}
   .class2 {background-color:#66cc99;color:#006633}
</style>

Then do the table this way.

<table border=1 bgcolor="66CC99" width=100% cellspacing=0 cellpadding=0
                                                              >
 <tr>
   <td width=20% class='class2" onMouseover="this.className='class1'"
       onMouseout ="this.className='class2'"><b>Home</td>

   Just repeat the same thding for each cell

 </tr>

</table>


Cd&
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
COBOLdinosaurCommented:
BTW,

Does not work in Netscrap 4.x, because it does not support mouse events on cells

Cd&
0
 
tewaldCommented:
mskvarenina, you are correct.  By setting the style for a <td> tag (as I showed) you define the appearance for all <td> tags on the page.  You get around this by using the technique COBOLDinosaur demonstrated: class selectors.  CD's answer is the correct approach, but the following is just to help clarify how to use a class selector.

Instead of using td in the style, use a name that makes sense for what you're applying the style to.  The name must follow a "." as shown below.  Within the brackets you may list as many elements as you'd like, but each must be separated by a ";".

<head>
<style type="text/css">
.initialColor { color: #339966; }
</style>
</head>

Then, using one of your cells as an example, you apply the style using the following syntax:

<td class="initialColor" width=20%
 onMouseover="this.bgColor='339966',
 onMouseover=this.style.color='33FF99'"
 onMouseout ="this.bgColor='66CC99',
 onMouseout =this.style.color='006633'"><b>Home</td>

Using this approach let's you specify which style, if any, to apply to each <td> element.  You could setup different class selectors and apply them to just about any element on the page, not just <td>s.

tewald
0
 
raizonCommented:
mskvarenina, the simplist way would be to follow the steps that COBOL layed out for you.
0
 
lauciricadCommented:
ALCON,

I'll throw some points out there if someone can show code modifications for changing the text font color of hyperlinked text, using the code COBAL desplayed.

Good question mskvarenina, sorry for the intrude.

Don L.
0
 
chromoniumCommented:
use .a { ... } would change all hyperlinks

sure it wouldnt matter?

just insert in href tag or <a>
0
 
COBOLdinosaurCommented:
Using a tag would only chane the link not the cell background... time to lock it... anyone object?

Cd&
0
 
COBOLdinosaurCommented:
Using a tag would only chane the link not the cell background... time to lock it... anyone object?

Cd&
0
 
chromoniumCommented:
what do you mean... lock it??
0
 
raizonCommented:
Lock it Cobol.  The question has been answered with code.
0
 
chromoniumCommented:
yes I object
0
 
chromoniumCommented:
use .a { ... } would change all hyperlinks

sure it wouldnt matter?

just insert in href tag or <a>
0
 
COBOLdinosaurCommented:
chromonium,

Welcome to Experts-exchange.

If you read the question you will note the the questioner wants to change the attributes on a cell. Using a link will only change the link, not the cell.

Answer in code supplied above.

Cd&

0
 
chromoniumCommented:
yeah, using css will work regardless of the content, providing it exists
0
 
chromoniumCommented:
why lock it???
0
 
COBOLdinosaurCommented:
>>> why lock it?

Because it is answered the questioner has not commented since Aug 10 when they got their answer and left.

lauciricad,

If you want use that technique for links set the styles this way:

<style>
  .class1 a {background-color:#339966;color:#33ff99}
  .class2 a {background-color:#66cc99;color:#006633}
</style>

Then put the link in a span with the class applied.


or just apply the class to the link.

Cd&
0
 
mskvareninaAuthor Commented:
COBOLdinosaur, I didn't leave I was just out of town.  Your solution looks great...thanks for the help!
0
 
COBOLdinosaurCommented:
Glad to help thanks for the A. :^)

Cd&
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 7
  • 6
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now