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

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

3929792

HOME | DIARY | PROFILE

2006.07.19

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

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

・テーブルをつかう

前回は、枠に色をつける方法を学びました。
今回は、枠に別々に色をつける方法を学んでいきましょう。

今回は、

「 bordercolordark 」「 bordercolorlight 」

属性をつかいます。
これで暗い部分・明るい部分にわけて色付けができるのです。

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

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

「 table 」に
「 bordercolordark 」を設定：

●

○

□

■

→

（「&LT;table border="3" bordercolordark="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;」と入力）

さらに・・・
「 bordercolorlight 」を設定：

●

○

□

■

→

（「&LT;table border="3" bordercolordark="red" bordercolorlight="#ff9900" &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="3"&GT;
&LT;tr bordercolordark="#003300"
bordercolorlight="#009900" &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="3"&GT;
&LT;tr&GT;&LT;td bordercolordark="#333399"
bordercolorlight="#33ff99" &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;」と入力）

このように暗い部分と明るい部分に色をわけてつけていくことができました。
「 bordercolordark 」だけを設定すると、けっこうカッコイイですね。

[ トップページへ戻る ]

[ 次のページ⇒ ]

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