TABLE タグを活かす(1)


TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 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集

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

<DIV align="center"><TABLE border=1 cellspacing=10>
<TR><TD colspan=2 align="center" bgcolor="#FFEE00">&nbsp;<BR>病院<BR>・</TD>
<TD bgcolor="#FFEE00">&nbsp;</TD></TR>
<TR><TD align="center" bgcolor="#FFEE00">・<BR>コンビニ<BR>&nbsp;</TD>
<TD bgcolor="#FFEE00">・郵便局</TD>
<TD align="center" rowspan=2 bgcolor="#90EE90">公<BR>園</TD></TR>
<TR><TH align="center" bgcolor="#FFEE00"><FONT color="#FF0000">・<BR>ここ</FONT><BR>&nbsp;</TD>
<TD align="RIGHT" bgcolor="#FFEE00">交番・</TD></TR>
</TABLE> </DIV>

 
病院
 

コンビニ
 
・郵便局

ここ

 
交番・

この例のように、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>&nbsp;</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">A組</TD></TR>
<TR><TH align="center">20〜29歳</TH>
<TD align="center">30人</TD>
<TD align="center">B組</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">C組</TD></TR>
<TR><TH align="center">40歳以上</TH>
<TD colspan=2 align="center">該当者なし</TD></TR>
</TABLE></DIV>

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

  年齢層 人数 クラス


19歳以下 16人 A組
20〜29歳 30人 B組


30〜39歳 21人 C組
40歳以上 該当者なし

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

  年齢層 人数 クラス


19歳以下 16人 A組
20〜29歳 30人 B組


30〜39歳 21人 C組
40歳以上 該当者なし

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

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




次のトピックは「TABLE タグを活かす(2)」です。

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

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