Hola
Respondiendo de forma estricta a la pregunta, es decir mediante el uso de xhtml y css, la forma más adecuada es usar códigos como este:
css Cita: .capita {
background-color: #cc0000;
}
.capita:hover { /* El efecto hover sobre elementos que no sean vínculos, no funciona adecuada o completamente en explorer */
background-color: #00cc00;
}
html
Código:
<table id="tabla00" title="Primera tabla">
<tr id="fila00" title="Primera fila">
<th id="celda00"><div class="capita" id="capita">texto 1</div></th>
<th id="celda01">texto 2</th>
</tr>
</table>
__________________________________________________
El problema con eso, es que explorer no lo entiende y por lo tanto, no obtendrás el efecto deseado en todos los navegadores, así que para lograr el efecto deseado y mantener las buenas normas de construcción de documentos web, puedes usar estos códigos:
css Cita: .capita {
background-color: #cc0000;
}
.capita:hover { /* El efecto hover sobre elementos que no sean vínculos, no funciona adecuada o completamente en explorer */
background-color: #00cc00;
}
html
Código:
<table id="tabla00" title="Primera tabla">
<tr id="fila00" title="Primera fila">
<th id="celda00"><div class="capita" id="capita" onmouseover="javascript:cambiarcolorcelda('1')" onmouseout="javascript:cambiarcolorcelda('0')">texto 1</div></th>
<th id="celda01">texto 2</th>
</tr>
</table>
Código:
function cambiarcolorcelda(x) {
if (x == 1) {
document.getElementById('capita').style.background = "00cc00";
} else {
document.getElementById('capita').style.background = "cc0000";
}
}
__________________________________________________
Espero no haber olvidado nada por despiste.
Felicidad