４：表を作ろう！！　～TABLEタグの基本

　さて，お待たせしました！ここからはいろいろなタグを個別に解説していきたいと思います。今回は <TABLE>タグです。

　TABLEタグは，基本的には表を作るためのタグですが，色々応用を効かせる事が出来ます。効果と注意点を考えて効果的に使いましょう。
表を作るには，TABLEタグの他にもいくつかのタグを組み合わせて作ります。簡単な例を挙げてみましょう。

<TABLE BORDER=1>
	<TR><TH>　</TH><TH>大人</TH><TH>子供</TH></TR>
	<TR><TH>男性</TH><TD>5人</TD><TD>3人</TD></TR>
	<TR><TH>女性</TH><TD>9人</TD><TD>1人</TD></TR>
</TABLE>

こう記述すると，こう表示されます

	大人	子供
男性	5人	3人
女性	9人	1人

　では，各タグを細かく解説します。

<TABLE>～</TABLE>

　このタグは<BODY>などと同じような使い方をします。このタグで囲んだ所に表のデータを書きます。データの書き方は下の各タグの解説で詳しく書きますので，ここでは属性を解説したいと思います。

属性	入る値のタイプ	説明
ALIGN	left,center,right	表を左右のどこに表示させるかです。leftかrightだとその後の文章の位置も指定できます。下の例を見て下さい。
BORDER	数字	外枠の立体部分の太さをきめるのですが，これを1以上にしないと正常に表示できないようです。※詳細は下のコラムへ
CELLSPACING	数字	枠線の太さを決めます。詳しくはサンプル参照
WIDTH	数字or%	表全体の幅を決めます。%指定だとウィンドウの高さに対する割合で設定されます。
HEIGHT	数字or%	表全体の高さを決めます。%指定だとウィンドウの高さに対する割合で設定されます。

　他にも属性は有りますが，TABLEは奥が深いのでまたの機会に上級編として説明します。

ALIGN属性の実例
　上の例を使ってleft,center,rightと変えていきます。

・leftにした場合

	大人	子供
男性	5人	3人
女性	9人	1人

　その後に続く文章はここに表示されるわけです。どの位置に表示されるのかに注目してみて下さいね。

・centerにした場合

	大人	子供
男性	5人	3人
女性	9人	1人

　その後に続く文章はここに表示されるわけです。どの位置に表示されるのかに注目してみて下さいね。

・rightにした場合

	大人	子供
男性	5人	3人
女性	9人	1人

　その後に続く文章はここに表示されるわけです。どの位置に表示されるのかに注目してみて下さいね。

　center以外にした場合は文章は横に表示されると言うわけです。表の下から文章を続けたくなったら，３章でやった<BR>タグのCLEAR属性を使いましょう。ちなみに，ALIGNは設定しないと一番上の例の通りで，表は左で文章は下になります。

<TR>～</TR>

　このタグは「行」を定義します。使い方は上の例を見れば大体わかると思いますが，「ここから新しい行だよ」と言っているわけです。かならずTABLEタグに囲まれた中にかかないといけません。

属性	入る値のタイプ	説明
ALIGN	left,center,right	文字をどちらにそろえて表示するかです。詳しくはTH,TD参照
VALIGN	top,middle,bottom	こちらは縦方向の文字の位置を決めます。なにも設定しないと勝手にmiddleになります。詳しくはTH,TD参照

　続いて行の中の列を定義するのですが・・・見ての通り２種類のタグが有ります。

<TH>～</TH>

　このタグは下のTDと同じで列の定義なのですが，「見出し」を定義します。具体的には太字になり，また ALIGNを設定しないとまん中揃えになります。この属性一覧表の「属性・入る値のタイプ・説明」はTHタグです。

属性	入る値のタイプ	説明
NOWRAP	なし	これを入れると例え文字列に対して幅が狭くても，自動改行しません（セルの幅が自動で広がります）
ALIGN	left,center,right	文字をどちらにそろえて表示するかです。何も設定しないとcenterになります
VALIGN	top,middle,bottom	こちらは縦方向の文字の位置を決めます。なにも設定しないとこのタグを囲っているTRタグのVALIGN属性になります
WIDTH	数字	このセルの幅を決めます。
HEIGHT	数字	このセルの高さを決めます。

　他にもセルとセルをくっつける属性なども有りますが，それは次回紹介します。

<TD>～</TD>

　このタグはもともとの意味としては，見出しに対し「データ」を意味します。属性は全てTHと同じですが， ALIGN属性だけ動きが変わります。

　TDではALIGN属性を設定しないと，TRのALIGN属性になります。それもなければ左揃え(left)になります

　以上が簡単な表タグの説明でした。最後にまとめると・・・

<TABLE BORDER=1>
	<TR><TH>見出し</TH><TH>見出し</TH><TH>見出し</TH></TR>
	<TR><TD>内　容</TD><TD>内　容</TD><TD>内　容</TD></TR>
	<TR><TD>内　容</TD><TD>内　容</TD><TD>内　容</TD></TR>
</TABLE>

　常にTH,TDはTRに囲まれていると言う事を考えましょう。また，セルの数がめちゃくちゃだと表示が崩れるので，実際に表示させてチェックしてみると良いでしょう。

コラム：バグか仕様か，BORDER属性

　上の説明で「BORDER属性に1以上を設定しないとうまく表示されない」と書きましたが，どう言う事かと言うと「設定をしないと0になる」のです。さて，一番上の例をBORDER=0で表示してみると・・・

	大人	子供
男性	5人	3人
女性	9人	1人

　これは表としては失格ですね。なお，私の手元のHTML解説本には「BORDERの初期値は1」と書いてあります。誤植と言ってしまえばそこまでですが，やや古い本なので最近のブラウザでは0になったという可能性も有ります。もし上の表にちゃんと線が見えると言う人は，是非ブラウザのバージョンを添えて御一報下さい。また，数値を設定する属性についてはこういう問題をさけるためにも，省略せずちゃんと数値を入れる事をお勧めします。

今回は奥の深い表タグの基本を扱ったので，中には「んなこともう知っとるわい！」という人もいるかと思います。　次回はいよいよ表タグの可能性を探っていく（？）ことになるわけですが，基本をもう一度見直し自分の書き方は果たしてちゃんとなっているのか確認してみるのも良いかと思います。
　では，次回も引き続き<TABLE>タグです。お楽しみに！！

＞戻る