マウスを乗せると背景色が変化するセル
選択したセルなどの色を変えたいときには、 " onmouseover " " onmouseout " を使って指定します。
" onmouseover " でマウスが乗ったときのセルの背景色を指定し、 " onmouseout " でマウスが外れたときのセルの背景色を指定します。
sample : 選択した時の背景色を #fff0f5 とし、マウスがはずれたら背景色が #ffffff に戻るように指定してみました。
| テキスト１ | テキスト２ | テキスト３ |
| テキスト４ | テキスト５ | テキスト６ |
| テキスト７ | テキスト８ | テキスト９ |
| テキスト１０ | テキスト１１ | テキスト１２ |
<table width="50%" border=1 cellspacing="0" align="center" >
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト２</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト３</td>
</tr>
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト４</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト５</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト６</td>
</tr>
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト７</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト８</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト９</td>
</tr>
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１０</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１１</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１２</td>
</tr>
</table>
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト２</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト３</td>
</tr>
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト４</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト５</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト６</td>
</tr>
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト７</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト８</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト９</td>
</tr>
<tr>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１０</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１１</td>
<td onMouseOver="this.style.backgroundColor='#fff0f5'" onMouseOut="this.style.backgroundColor='#ffffff'"> テキスト１２</td>
</tr>
</table>