楽天広場HTML講座・テーブルの枠の色を変える

100万ポイント山分け！1日5回検索で1ポイントもらえる

000000

HOME | DIARY | PROFILE

2006.07.19

テーマ：ホームページ作成の悩み(545)

カテゴリ： HTMLタグ（テーブル）

・テーブルをつかう

前回は、テーブルの色を変える方法を学びました。
今回は、テーブルの枠に色をつける方法を学んでいきましょう。

枠に色をつけるときは、「 bordercolor 」属性をつかいます。

この属性は「 table 」はもちろん、「 tr 」「 td 」にも設定できます。

たとえばこの例をみてください。

「 table 」に色を設定：

●

○

□

■

→

（「&LT;table border="1" bordercolor="red" &GT;
&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

さらに「 tr 」に色を設定：

●

○

□

■

→

（「&LT;table border="1" bordercolor="red" &GT;
&LT;tr bordercolor="blue" &GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

さらに「 td 」に色を設定：

●

○

□

■

→

（「&LT;table border="1" bordercolor="red" &GT;
&LT;tr bordercolor="blue" &GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td bordercolor="green" &GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

このように好きな部分に色をつけていくことができます。

ここで、枠の幅を変える属性「 cellspacing 」をつかい、
属性値を「0」にしてみると・・・

「 table 」に色を設定：

●

○

□

■

→

（「&LT;table border="1" bordercolor="red" cellspacing="0" &GT;
&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

枠を塗りつぶすことができました。

次回は、枠部分に色をつける方法の続編です。

[ トップページへ戻る ]

[ 次のページ⇒ ]

お気に入りの記事を「いいね！」で応援しよう