テーブルの中に色をつけよう!



テーブルに背景色を付けるには、BGCOLOR="カラーコード"を使います。
このタグを使う場所は

テーブル全体の背景色を指定する場合→ <TABLE BORDER BGCOLOR="カラーコード">

一行(一列)だけの背景色を指定する場合→ <TR BGCOLOR="カラーコード">

1マスだけの背景色を指定する場合→ <TD BGCOLOR="カラーコード">

カラーコードの部分はカラーネームでもOK!
<TABLE BORDER BGCOLOR="#FFC0CB">
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
テーブル全体の背景色をピンクに指定しました。
左のように書いたのを表示させるとこうなります。

<TABLE BORDER>
<TR BGCOLOR="skyblue">
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR BGCOLOR="#FFFF00">
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
上の段をスカイブルーに
下の段を黄色に指定しました。
左のように書いたのを表示させるとこうなります。

<TABLE BORDER>
<TR>
<TD BGCOLOR="#FF0000"></TD>
<TD BGCOLOR="white">
</TD>
<TD BGCOLOR="#C0C0C0">
シルバー</TD>
</TR>
<TR>
<TD BGCOLOR="#00FFFF">アクア</TD>
<TD BGCOLOR="Green">
</TD>
<TD BGCOLOR="#FFA500">
オレンジ</TD>
</TR>
</TABLE>
1マスごとに色をつけてみました。
左のように書いたのを表示させるとこうなります。

センスなさすぎの色使いだけど、
サンプルなので勘弁・・・


シルバー
アクアオレンジ
<TABLE BORDER BGCOLOR="#FFC0CB">
<TR BGCOLOR="skyblue">
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR BGCOLOR="#FFFF00">
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
テーブル全体をピンクに指定、
上の段をスカイブルーに
下の段を黄色に指定しました。
左のように書いたのを表示させるとこうなります。


テーブル作成の目次に戻る