テーブルちょい応用編

• ここでは、少々難易度の高いテーブル組みをしてみましょう。
  とは言っても、前のページとの差はほとんどありませんけどね。ｗ
  どちらかというと、カッコいいのを作るための章と考えてもらえばいいです。
  前のページでの学習内容を複合したものと考えてくださいね。

ここからは、テキストエリアにタグを入れてありますので、１クリックで文字の背景が変わったら、右クリックか上の編集を選択してコピーしたらメモ帳に貼り付けて使ってみてください。
面白いタグなどを見つけたら、コピーしてメモする癖をつけるのがいいですね。

●テーブル枠に色をつけてみましょう。
　　　    

　　　　　<TABLE border="5" cellspacing="3" bordercolor="BLUE" bordercolorlight="GREEN" bordercolordark="RED"> <TR><TD>ここには好きな文字（ｏｒ画像）</TD></TR></TABLE>　　↓下が同じタグによる表示例です。

※例は指定がどう表示されるかを見るために、派手な色にしてあります。ｗ
　 ある程度落ち着いた色合いじゃないと、立体感も出ないですね。（汗）
※もちろんテーブルには画像も入れることができます。（下で説明してます。）

●テーブルに画像を入れてみましょう。
　　　　

　　　　　<TABLE border="3" cellpadding="0" cellspacing="2" bordercolor="blue" bordercolorlight="#cccccc" bordercolordark="#333333"> <TR><TD><IMG src="画像のＵＲＬ" alt="画像説明"></TD></TR> </TABLE>

※今度は少しだけ落ち着いた色にしてみました。ｗ
※これなら、かなり立体感も出ていますね。

●セルに色をつけてみましょう。
　　　　　

　　　　　<TABLE border="5" cellspacing="2"> <TR><TD bgcolor="red"></TD><TD bgcolor="yellow"></TD><TD bgcolor="blue"></TD></TR> </TABLE>

※ちょっと遊んでみました。ｗ
※ちょっとした信号機みたいでしょ？ｗ
●上のテーブルの枠だけを取ってみました。

　　　　　<TABLE border="0"> <TR><TD bgcolor="red"></TD><TD bgcolor="yellow"></TD><TD bgcolor="blue"></TD></TR> </TABLE>

※このセルだけのものが、よく使うテーブルの基本のようなものですね。
　 特にページを構成するテーブルなどは、これを使用してます。（このサイトも）
※何気に最重要ポイントかも知れないです(o^-')b

●見出しをつけた表を作ってみましょう。

　　　　　<TABLE border="2" cellpadding="2" cellspacing="0" bordercolor="black"> <TR><TH bgcolor="#cccccc">＼</TH><TH bgcolor="#ffffcc">項目１</TH><TH bgcolor="#ffffcc">項目２</TH><TH bgcolor="#ffffcc">項目３</TH></TR> <TR><TH bgcolor="#f0ffff">縦項目</TH><TD> </TD><TD> </TD><TD> </TD></TR> <TR><TH bgcolor="#f0ffff">縦項目２</TH><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR> </TABLE>

＼ 項目１ 項目２ 項目３ 縦項目１       縦項目２

※項目は<TH></TH>で追加できます。やってみてください。