もっとうまい方法がありそうな気がしますが、とりあえずのサンプルとして…
Javascript利用での一例です。
(colspan、rowspanなどを使用していないものと仮定しています)
<html>
<head>
<style type="text/css">
tr { height:50px; }
td { width:50px; }
</style>
<script type="text/javascript"><!--
var t,r;
window.onload=function(){
t=document.getElementById('data1').getElementsByTagName('TD');
r=document.getElementById('data1').rows;
for (i=0; i<t.length; i++){
t[i].onmouseover=function(){set(this)};
t[i].onmouseout=function(){out()};
}
}
function set(e){
var er=e.parentNode; var i=0,elm;
while (elm=r[i++]){if(elm==er){var erN=i-1; break;}}
i=0;
while (elm=r[erN].cells[i++]){if(elm==e){var ecN=i-1; break;}}
out();
for (i=0; i<r.length; i++){
r[i].cells[ecN].style.backgroundColor='yellow';
if (i==erN) r[i].style.backgroundColor='yellow';
}
}
function out(){
for (var i=0; i<t.length; i++) t[i].style.backgroundColor='';
for (var i=0; i<r.length; i++) r[i].style.backgroundColor='';
}
// --></script>
</head>
<body>
<table border=1 id="data1">
<thead></thead>
<tbody>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
<tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
<tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
</tbody>
</table>
</body>
</html>
お礼
お手数でした。ありがとうございます。 ほぼ満足です。早速アレンジしてみたいとおもいます。