５

 表でもう少し凝ったレイアウトをしてみよう！

basic.gif (3042 バイト)

４．

 表に色をつけよう！
NE3 NE4 NE6 IE3 IE4 IE5 IE6 i

ついに表に色を塗る時が来たよ。
もっともっとホームページをきれいにしようね｡
じゃあ、色を塗る方法をやってみよう。
少し覚えることが多いかもしれないけれど、別に全部覚えなくてもいいからね。自分の使いたいものだけ選んでやってみてね。

<TABLE 
BORDER BORDERCOLOR="■" 
BORDERCOLORLIGHT="■" 
BORDERCOLORDARK="■">
〜</TABLE> 		　    ・・・・表の枠の色

■：枠の色
▲：枠の明るい部分の色
★：枠の暗い部分の色

もし、表を単独の色で作るのならば一番上の<TABLE BORDER BORDERCOLOR=■>〜</TABLE>を使うだけでいいからね。
もっと、立体的に色をつけたい人は下の２つを書こう｡
<TABLE BORDER BORDERCOLORLIGHT=■>〜</TABLE>は表の左上の明るい(LIGHT)部分の色を指定できる。あとでサンプルを見てみよう。
<TABLE BORDER BORDERCOLORDARK=■>〜</TABLE>は表の右下の暗い(DARK)部分の色を指定できる。これもあとでサンプルを見てみようね。
色の指定は色の名前を入れる方法（色のサンプル）と#RRGGBB法（後にやります）というのがあるんだ｡好きなほうを選んでね。

ではもう１つ、表の中のセルに色をつけてみよう。

<TD BGCOLOR=■>〜</TD> 　    ・・・・セルの中に色をつける

■：セルの色

セルに色をつけるので<TD>のなかにBGCOLORが入ってるね。

　SOURCE
<HTML>
<HEAD>
<TITLE>テーブル</TITLE>
</HEAD>
<BODY>

<TABLE BORDER="10" BORDERCOLOR=orange>　　　　　　　　←色をオレンジ一色にしてみよう
　　<TR>
　　　　<TD>枠線がオレンジで書かれたね。</TD>
　　</TR>
</TABLE>

<TABLE BORDER="10" BORDERCOLORLIGHT=aqua BORDERCOLOR=blue>
↑水色と青を使って立体的にしてみよう。わかりやすいように枠の大きさBORDERは10にしておいた。
　　<TR>
　　　　<TD>明るい部分が水色、暗い部分が青色になってちょっと立体的になったね｡</TD>
　　</TR>
</TABLE>

<TABLE BORDER>
　　<TR>
　　　　<TD BGCOLOR=yellow>中が黄色になったでしょ。</TD>
　　</TR>←セルに色をつけるから<TD>に書くんだよ｡
</TABLE>

</BODY>
</HTML>

ではこれらを実際に表示するとどうなるだろう｡

　RESULT 　

枠線がオレンジで書かれたね。
 　　←オレンジだけで枠ができたね。下と比べてみよう。
明るい部分が水色、暗い部分が青色になってちょっと立体的になったね｡
↑きれいに立体的になったね。色の組み合わせでいろいろできるのでやってみてね｡これと上を比べてね｡
わかりやすいように枠は大きめにしておいたよ。
中が黄色になったでしょ。
 　←セルの中が黄色になってるね。

　

back.gif (1116 バイト)　表の大きさを変えよう！
next.gif (705 バイト)　まとめ