Hola. en estos días estaba haciendo eso mismo. LO logre con la ayuda de los amigos de acá del foto. Te cuento utilize CSS
Cree una hoja con los estilos
=================================================
.table{
width:auto;
height:40px;
border-spacing:2px;
font-family:Arial, Helvetica, sans-serif;
color:#6D7B8D;
font-size:12px;
}
tr{
background-color:#000033;
}
.encima{
color:#FFFFFF;
background-color:#1569C7;
}
.fuera{
color:#6D7B8D;
}
Y después en mi código HTML coloque la tabla así:
<table>
<tr>
<td id="celda1" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>HTML</b></td>
<td id="celda2" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>CSS</b></td>
<td id="celda3" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>JAVASCRIPT</b></td>
<td id="celda4" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>PHP</b></td>
</tr>
</table>
EN donde "this.className='encima'" le dices que al momento del evento onmouse over esa celda tomará la clase "ENCIMA" y al momento de evento onmouseout el estilo cambiará a "FUERA"
Espero que te sirva.! Cualquier cosa avisame.!
Saludos desde Venezuela