ホームページ作成ガイド

テーブルの行の色を変える

<HTML>
<HEAD>
<TITLE>テーブルの行の色を変える</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<TABLE WIDTH="450" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="CENTER"> </TD>
<TD ALIGN="CENTER">列</TD>
<TD ALIGN="CENTER">列</TD>
<TD ALIGN="CENTER">列</TD>
<TD ALIGN="CENTER">列</TD>
</TR>
<TR ID="col1" onMouseOver="document.all['col1'].style.background='#ffcc00'" onMouseOut="document.all['col1'].style.background='#FFFFFF'">
<TD ALIGN="CENTER">行</TD>
<TD ALIGN="CENTER">セル1</TD>
<TD ALIGN="CENTER">セル2</TD>
<TD ALIGN="CENTER">セル3</TD>
<TD ALIGN="CENTER">セル4</TD>
</TR>
<TR ID="col2" onMouseOver="document.all['col2'].style.background='#ffcc00'" onMouseOut="document.all['col2'].style.background='#FFFFFF'">
<TD ALIGN="CENTER">行</TD>
<TD ALIGN="CENTER">セル1</TD>
<TD ALIGN="CENTER">セル2</TD>
<TD ALIGN="CENTER">セル3</TD>
<TD ALIGN="CENTER">セル4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

テーブルのセルにマウスをあてると、横1行の色が変わる小ワザです。
たくさんのセルがあるテーブルでは、どの行がどの項目を示しているかわかりにくくなります。
この小ワザで見やすいテーブルを作ってみてはいかがでしょうか。

色を変えたい行（<TR>）に
・行の名称
　ID="col1"
・マウスオーバー時の処理
　onMouseOver="document.all['col1'].style.background='#ffcc00'"
　（マウスオーバーしたらcol1部分の背景をffcc00にする）
・マウスアウト時の処理
　onMouseOut="document.all['col1'].style.background='#FFFFFF'"
　（マウスアウトしたらcol1部分の背景をfffffにする）
を記述します。

行の名称、色などは自由に変更できます。