Supongo que el código es currartelo un rato. Si tuve iniciativa de currar por ti, fue gracias a la iniciativa de una gran forero:
CORE .
Va por los dos
<html>
<head>
<script>
function c1_dentro(){
document.getElementById('c1c1').style.background=' red'
document.getElementById('c1c2').style.background=' red'
document.getElementById('c1c3').style.background=' red'
}
function c1_fuera(){
document.getElementById('c1c1').style.background=' white'
document.getElementById('c1c2').style.background=' white'
document.getElementById('c1c3').style.background=' white'
}
function c2_dentro(){
document.getElementById('c2c1').style.background=' red'
document.getElementById('c2c2').style.background=' red'
document.getElementById('c2c3').style.background=' red'
}
function c2_fuera(){
document.getElementById('c2c1').style.background=' white'
document.getElementById('c2c2').style.background=' white'
document.getElementById('c2c3').style.background=' white'
}
</script>
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0>
<tr>
<td id="c1c1" onmouseover="c1_dentro()" onmouseout="c1_fuera()" width="50%">
Columna 1 - Celda 1</td>
<td id="c2c1" onmouseover="c2_dentro()" onmouseout="c2_fuera()" width="50%">
Columna 2 - Celda 1</td></tr><tr>
<td id="c1c2" onmouseover="c1_dentro()" onmouseout="c1_fuera()" width="50%">
Columna 1 - Celda 2</td>
<td id="c2c2" onmouseover="c2_dentro()" onmouseout="c2_fuera()" width="50%">
Columna 2 - Celda 2</td></tr><tr>
<td id="c1c3" onmouseover="c1_dentro()" onmouseout="c1_fuera()" width="50%">
Columna 1- Celda 3</td>
<td id="c2c3" onmouseover="c2_dentro()" onmouseout="c2_fuera()" width="50%">
Columna 2- Celda 3</td></tr>
</table>
</body>
</html>
Espero te sea útil!!!
Hasta pronto.