素材屋さんのテーブルを設置する方法

テーブルを使ってレイアウトしたサンプルをいくつか紹介します。

枠線を表示させるとき、StyleSheetのborderプロパティを使うこともできますが、ここではテーブルを使ってみます。
　　→　borderプロパティを使うときは「枠線の設定をまとめて指定する」に解説があります。

2003/09/22(Mon) ...

とてもシンプルな更新情報・日記バージョンです。
(BBSコーナーにあるものは、カウントゲットボードとして使用したときのサンプルです)


	<TABLE cellspacing="0" cellpadding="0" border="0"> <TR> <TD bgcolor="#aaa7dc">　　← 外枠の色 <TABLE cellspacing="2" cellpadding="3" width="100%" border="0">　　← cellspacingが枠の太さになります <TR> <TD bgcolor="#ffffff" width="300"><FONT color=#888888>2003/09/22(Mon)...</FONT><BR><BR> <TABLE> <TR> <TD width=10></TD>　　← widthで指定した大きさが余白になります <TD vAlign=top><FONT color=#888888>とてもシンプルな更新情報・日記バージョンです。<BR> (BBSコーナーにあるものは、カウントゲットボードとして使用したときのサンプルです)</FONT></TD> <TD width=10></TD>　　← widthで指定した大きさが余白になります </TR></TABLE> </TD></TR></TABLE> </TD></TR></TABLE>

テーブルを使った例。。その2。
素材屋さんに行くと用意されていることが多いですね。

2003/09/22(Mon) ...

とてもシンプルな更新情報・日記バージョンです。
(BBSコーナーにあるものは、カウントゲットボードとして使用したときのサンプルです)

素材:「Toy Box」

こういうタイプのものを設置するときには、縦3つ × 横3つのセルを用意します。
テーブルの枠線(border)を表示させるとこんな感じ。

2003/09/22(Mon) ...

とてもシンプルな更新情報・日記バージョンです。
(BBSコーナーにあるものは、カウントゲットボードとして使用したときのサンプルです)

上下・左右の四隅にあるセルには、画像をそのまま入れてもいいのですが、その他の枠の部分はテーブルの背景に画像を指定します。
そうしないと、縦横にテーブルの幅が変わったときに画像が切れてしまいます。
テーブルの背景に画像を指定したとき、テーブルの中(<TD>～</TD>の間)に何もないと、画像が表示されない場合があります。
また、レイアウトが崩れるのを防ぐために透過gifを入れておくとよいでしょう。
透過gifはココにあります　→　「レイアウトが崩れるのを防ぐ」
タグの解説はこちら↓


	<TABLE cellpadding="0" cellspacing="0">　← cellpaddingとcellspacingを"0"にしておかないと間があきます。 <TR> <TD><IMG src="img/left_a(3).gif" width="21" height="29" border="0"></TD>　← 左上のセル <TD background="img/center1(3).gif"><IMG src="img/spacer.gif" width="1" height="1" border="0"></TD>　← 上の中央のセル <TD><IMG src="img/right_a(3).gif" width="21" height="29" border="0"></TD>　← 右上のセル </TR> <TR> <TD background="img/left_b(1).gif"><IMG src="img/spacer.gif" width="1" height="1" border="0"></TD>　← 左中のセル <TD width="300" bgcolor="#f8f4e6">　← 中心のセル　　<TABLE width="100%" cellpadding="15" cellspacing="0" height="100%"> 　　<TR> 　　<TD><FONT color=#888888>2003/09/22(Mon) ...</FONT><BR><BR> 　　<TABLE><TR> 　　<TD width="10"></TD> 　　<TD vAlign=top><FONT color=#888888>とてもシンプルな更新情報・日記バージョンです。<BR> 　　(BBSコーナーにあるものは、カウントゲットボードとして使用したときのサンプルです)</FONT> </TD> 　　<TD width="10"></TD> 　　</TR></TABLE> 　　</TD> 　　</TR> 　　</TABLE> </TD> <TD background="img/right_b(1).gif"><IMG src="img/spacer.gif" width="1" height="1" border="0"></TD>　← 右中のセル </TR> <TR> <TD><IMG src="img/left_c(1).gif" width="21" height="6" border="0"></TD>　← 左下のセル <TD background="img/center2(1).gif"><IMG src="img/spacer.gif" width="1" height="1" border="0"></TD>　← 下の中央のセル <TD><IMG src="img/right_c(1).gif" width="21" height="6" border="0"></TD>　← 右下のセル </TR> </TABLE>

これも同じ縦3つ × 横3つのセルを使って設置しているのですが、四隅以外のセルは画像サイズの倍の数字になるように指定します。
そうしないとつながりがおかしくなってしまうので少し注意が必要です。

2003/09/22(Mon) ...

とてもシンプルな更新情報・日記バージョンです。
(BBSコーナーにあるものは、カウントゲットボードとして使用したときのサンプルです)

素材:「MINE CHANNEL!」


	<TABLE cellpadding="0" cellspacing="0"> <TR> <TD><IMG src="img/nanaset08_lt.gif" width="7" height="7" border="0"></TD> <TD background="img/nanaset08_top.gif" width="324"><IMG src="img/1px.gif" width="1" height="1" border="0"></TD> <TD><IMG src="img/nanaset08_rt.gif" width="7" height="7" border="0"></TD> </TR> <TR> <TD background="img/nanaset08_left.gif" height="126"><IMG src="img/1px.gif" width="1" height="1" border="0"></TD> <TD bgcolor="#ffffff"> <TABLE cellspacing="2" cellpadding="3" width="100%" border="0"> <TR> <TD bgcolor="#ffffff" width="300"><FONT color=#888888>2003/09/22(Mon) ...</FONT><BR> <BR> <TABLE> <TR> <TD width="10"></TD> <TD vAlign=top><FONT color=#888888>とてもシンプルな更新情報・日記バージョンです。<BR> (BBSコーナーにあるものは、カウントゲットボードとして使用したときのサンプルです)</FONT> </TD> <TD width="10"></TD> </TR></TABLE> </TD></TR></TABLE> </TD> <TD background="img/nanaset08_right.gif" height="126"><IMG src="img/1px.gif" width="1" height="1" border="0"></TD> </TR> <TR> <TD><IMG src="img/nanaset08_lb.gif" width="7" height="7" border="0"></TD> <TD background="img/nanaset08_bottom.gif" width="324"><IMG src="img/1px.gif" width="1" height="1" border="0"></TD> <TD><IMG src="img/nanaset08_rb.gif" width="7" height="7" border="0"></TD> </TR></TABLE>

ソースを見ればわかりますが、テーブルを使うとかなりのソース量になります。
今回のように何重にもテーブルを重ねるとどれがどのテーブルなのだかわかりにくくなるので気をつけてくださいね。