<style type="text/css">
td.mouseOver {
    background: #f7f7f7;
}
td.mouseOut {
    background: #fff;
}
</style>

로 선언해 주시고요..

<td onMouseOver="this.className='mouseOver';" onMouseOut="this.className='mouseOut'">

으로 하시면 됩니다. IE 에서는 이 방법밖에 없는 것 같고요.... FireFox 에서는

setAttribute("class","myClass");

를 사용할 수 있습니다. 스크립트에 this.onMouseOut="myMouseOutFunction();" 을 추가해 주면 td 에는 그냥

<td onMouseOver="myMouseOverFunction();">

와 같이만 해주어도 나머지 마우스 아웃이 script 로 구현이 되기 때문에 소스가 아주 간단해 지지요!! 그러나 현실적으로는 IE 에서 지원이 안되기 때문에 사용 불가능 합니다. ㅜㅜ 또 하나 재미 있는 것은요... 만약 색을 바꿔야 하는 td 의 내용이 글씨 뿐이라면.. :hover 슈도엘리먼트를 쓸 수 있습니다.

a:link, a:visited {
    display: block;
    background: #fff;
}
a:hover {
    display: block;
    background: #f7f7f7;
}

하시면 td 를 사용하지 않고서도 anchor 를 display: block 으로 바꾸고 width 와 height 를 주면 pure CSS 로 script 를 쓴것 과 같은 효과를 줄 수 있습니다.