TABLE タグを活かす（１）

TABLE タグは HTML のタグの中でも特に用途の広いタグの１つです。 TABLE とはこの場合、英語の「表」（「食卓」じゃないよ）から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。

<DIV align="center">
<TABLE cellpadding=10><TR><TH colspan=2 align="center">目次><TH></TR>
<TR><TD>・ごあいさつ</TD><TD>・メニュー</TD></TR>
<TR><TD>・注意事項</TD><TD>・FAQ集</TD></TR></TABLE>
</DIV>

目次
・ごあいさつ	・メニュー
・注意事項	・FAQ集

のようになります。TABLE タグはデフォルトでは border=0 を指定したのと同じ結果、つまり枠となる罫線が非表示になるためで、これを <TABLE cellpadding=10 border=1> と指定したとすると、

目次
・ごあいさつ	・メニュー
・注意事項	・FAQ集

のように白抜きの枠で表示されます。cellpadding とは枠の中のスペースで、数字が大きくなるほど広くなり、これを指定しない場合は、

目次
・ごあいさつ	・メニュー
・注意事項	・FAQ集

のように凝縮された表示となります。枠の白抜きをなくしたいのであれば、TABLE タグの中に cellspacing=0 と指定すると、

目次
・ごあいさつ	・メニュー
・注意事項	・FAQ集

となります。cellspacing とは罫線の白抜きの幅のことで、例えば cellspacing=10 とすると、

目次
・ごあいさつ	・メニュー
・注意事項	・FAQ集

となります。この機能を使って、簡単な地図を作ることもできますね。

病院・
・コンビニ	・郵便局	公園
・ここ	交番・	公園

この例のように、TABLE タグでは各セル内の色を TD bgcolor 或いは TR bgcolor として指定することができます。では cellspacing ではなく border の数値を変えたらどうなるかというと、( <TABLE cellpadding=10 border=10> の場合）

目次
・ごあいさつ	・メニュー
・注意事項	・FAQ集

のように外枠だけが立体的に見える効果を出すのですね。つまりこれは実用というより装飾的な効果です。（注：マイナーなブラウザでは立体効果が表示されません。）
話を表に戻しましょう。

<DIV align="center">
<TABLE border=1 cellspacing=0 cellpadding=6>
<TR><TD> </TD>
<TH align="center">年齢層</TH>
<TH align="center">人数</TD>
<TH align="center">クラス</TD></TR>
<TR><TH rowspan=2 align="center">若<BR>年<BR>部</TH>
<TH align="center">19歳以下</TH>
<TD align="center">16人</TD>
<TD align="center">Ａ組</TD></TR>
<TR><TH align="center">20～29歳</TH>
<TD align="center">30人</TD>
<TD align="center">Ｂ組</TD></TR>
<TR><TH rowspan=2 align="center">高<BR>年<BR>部</TH>
<TH align="center">30～39歳</TH>
<TD align="center">21人</TD>
<TD align="center">Ｃ組</TD></TR>
<TR><TH align="center">40歳以上</TH>
<TD colspan=2 align="center">該当者なし</TD></TR>
</TABLE></DIV>

この例では cellspacing=0 で枠の太さを罫線らしくし、縦２行にわたるセルは rowsapn=2 で指定し、横２列にわたるセルは colspan=2 で指定しています。

	年齢層	人数	クラス
若年部	19歳以下	16人	Ａ組
若年部	20～29歳	30人	Ｂ組
高年部	30～39歳	21人	Ｃ組
高年部	40歳以上	該当者なし

次のように bgcolor で色を指定すると、更に見やすくなりますね。

	年齢層	人数	クラス
若年部	19歳以下	16人	Ａ組
若年部	20～29歳	30人	Ｂ組
高年部	30～39歳	21人	Ｃ組
高年部	40歳以上	該当者なし

なお、Internet Explorer なら、TABLE タグの中に FRAME= 指定で外側の枠のどの部分を表示・非表示にするかを指定することができますし、RULES= 指定で内側の罫線の表示・非表示の形式を指定することもできるので、かなり面白い表現ができそうです。

少し長くなりました。この続きは「TABLE タグを活かす（２）」で述べます。

次のトピックは「TABLE タグを活かす（２）」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで

病院・
・コンビニ	・郵便局	公園
・ここ	交番・	公園