<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#My:hover tr#first td{
background-color:cyan;
}
.selected-2 {
background-color:#FCCEFC;
}
.selected {
background-color:cyan;
}
</style>
<table id=My border="1" cellspacing="2">
<tbody>
<tr id=first>
<td colspan=4>ячейка 1</td>
</tr>
<tr>
<td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
</tr>
<tr>
<td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
</tr>
<tr>
<td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
</tr>
<tr>
<td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
</tr>
<tr>
<td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
</tr>
<tr>
<td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
</tr>
</tbody></table>
<script type="text/javascript">
$('#My tr:not("#first")').each (function() {
$(this).find('td').each (function(i) {
$(this).addClass('Col-'+i);
});
});
$("#My td[class^='Col-']").mouseenter(function() {
var I=$(this).parent().find('td').index(this);
$("#My td[class^='Col-"+I+"']").addClass('selected');
$(this).parent().find('td').addClass('selected-2')
}).mouseleave(function(){
var I=$(this).parent().find('td').index(this);
$("#My td[class^='Col-"+I+"']").removeClass('selected')
$(this).parent().find('td').removeClass('selected-2')
});
</script>