◆好みの色で表に陰影をつけてみよう!◆

立体感のない表
2D

立体感のある表
3D

 
Red

表に好きな色で陰影がつけられたら楽しいですよね?

陰影をつけることによって立体的な表が作成できます。

また、セル内に文字を入れないとボタンとしても使用できます。

<TABLE BORDER=1
BORDERCOLORLIGHT="green"
BORDERCOLORDARK="blue">
<TR><TD>
立体感のない表</TD></TR>
<TR><TD>
2D</TD></TR>
</TABLE>

<TABLE BORDER=4
BORDERCOLORLIGHT="cornflowerblue"
BORDERCOLORDARK="navy">
<TR><TD>
立体感のある表</TD></TR>
<TR><TD>
3D</TD></TR>
</TABLE>

<TABLE BORDER=0
<TR><TD>
<TABLE BORDER=15
CELLSPACING=3
BORDERCOLORLIGHT="red"
BORDERCOLORDARK="darkred">
<TR><TD></TD></TR>
</TABLE>
</TD><TD>
Red</TD></TR>
</TABLE>

表の外枠は2つの色を使って立体感を出すようになっています。

通常は明るい部分が銀色で、影の部分が濃い灰色です。

この部分に色指定を与えてやれば、自由な色で立体感のある表が作成できます。

しかし、BORDERCOLORLIGHT="green" BORDERCOLORDARK="blue"のように全く異なる色を使用すると、立体感はなくなります。

逆にBORDERCOLORLIGHT="cornflowerblue" BORDERCOLORDARK="navy"のように明暗それぞれに同系色を使用すると、浮き上がって見えます。

またBORDERの値も重要な決め手になります。

立体感を出すのならBORDER=4のように、3以上の値を指定しましょう。

また、セルの中に文字を入れないとピラミッド型のボタンとして使用できますので、これに色を指定してやればカラフルなアイコンになります。

BORDER=15 CELLSPACING=3 BORDERCOLORLIGHT="red" BORDERCOLORDARK="darkred"という具合ですね。

HTMLにCha☆llengeへ戻ります