フリーソフトで作るホームページ講座 「表(TABLE)」
今回は表についてです。HTMLにTABLEという機能が有り普通に表を作るのにも使いますが画面レイアウトする場合にも大活躍します。
まずは普通の表のサンプルです。

HTML文書の作り方の基礎の基礎 自分のパソコンの中だけで見れるホームページが作れます。
フリーソフトの手に入れ方 皆さん、ご存知でしょうけど。

これは以下のように記述します。

<TABLE BORDER>

<TR>
<TD>HTML文書の作り方の基礎の基礎</TD>
<TD>自分のパソコンの中だけで見れるホームページが作れます。</TD>
</TR>

<TR>
<TD>フリーソフトの手に入れ方</TD>
<TD>皆さん、ご存知でしょうけど。</TD>
</TR>

</TABLE>

表に関する記述の前後を<TABLE BORDER>と</TABLE>で囲みます。
表の1列毎に<TR>と</TR>で囲みます。
1項目毎に<TD>と</TD>で囲みます。
ルールはこれだけです。簡単ですよね。

次はもう少し複雑にしてみます。以下のような場合です。

超初級編 HTML文書の作り方の基礎の基礎 自分のパソコンの中だけで見れるホームページが作れます。
フリーソフトの手に入れ方 皆さん、ご存知でしょうけど。

これは以下のように記述します。

<TABLE BORDER>

<TR>
<TD ROWSPAN=2>超初級編</TD>
<TD>HTML文書の作り方の基礎の基礎</TD>
<TD>自分のパソコンの中だけで見れるホームページが作れます。</TD>
</TR>

<TR>
<TD>フリーソフトの手に入れ方</TD>
<TD>皆さん、ご存知でしょうけど。</TD>
</TR>

</TABLE>

<TD ROWSPAN=2>超初級編</TD>の1行が増えています。
ROWSPAN=で指定した列だけブチ抜いて表示します。横方向に抜きたい場合はCOLSPANを使用します。

さて次はいかがでしょうか。上の表と同じように見えたらブラウザのWindowの幅を色々変えて見てください。違いがわかるはずです。

超初級編 HTML文書の作り方の基礎の基礎 自分のパソコンの中だけで見れるホームページが作れます。
フリーソフトの手に入れ方 皆さん、ご存知でしょうけど。

Windowの幅を変えても1行目(超初級編の行)と2行目(HTML...とフリー...の行)は途中で改行しないようになっています。改行したくない項目にはTDの後ろにNOWRAPと入れることにより実現できます（こんな感じです。<TD ROWSPAN=2 NOWRAP>超初級編</TD>）。NOWRAPを指定して改行したい場合は<BR>を使います。

ここまでが表としての使い方でした。では画面レイアウトはどう使うのでしょうか。

1.日時 平成11年8月22日(日)
2.場所 東平尾公園テニス競技場
3.費用の負担 2,000円/人 (ボール代、コート料、賞品代共)

上のように単に書き下すと文字と文字の間のスペースが調節できませんがTABLEを使って行の頭を揃えることによりレイアウトできます。

1.日時 平成11年8月22日(日)
2.場所 東平尾公園テニス競技場
3.費用の負担 2,000円/人 (ボール代、コート料、賞品代共)

これは以下のように記述されています。

<TABLE>

<TR valign=top>
<TD>1.日時</TD>
<TD>平成11年8月22日(日)</TD>
</TR>

<TR valign=top>
<TD>2.場所</TD>
<TD>東平尾公園テニス競技場</TD>
</TR>

<TR valign=top>
<TD NOWRAP>3.費用の負担</TD>
<TD>2,000円/人 (ボール代、コート料、賞品代共)</TD>
</TR>

</TABLE>

今までと違うのは<TABLE>の所にBORDERが有りません。これにより表の周りの枠が表示されなくなります。後、TRの後ろにvalign=topが付いています。これが付いていると1つの項目に複数行のスペースあった場合、文字を表示する場所を一番上に合わせます。何もないときは中央に合わせられます。枠が無いときに中央に合わせられると違和感があるのでvalign=topを指定して使っています。
valign=topを指定 1列目
2列目
3列目
valign=topを指定せず 1列目
2列目
3列目

左側に写真、右側にその説明という場合もTABLEを使っています。以下のような場合です。

イグアス空港に着いて最初に歓迎してくれたのは 「数十羽の蝶」と思いきや回りを見渡すと「数百羽の蝶々」 それも色々なカラーの蝶々達で異国の地に来ている様な ．．．って最初からそうでした。 ここの蝶の羽には番号の模様のものが多く、私が見たのは 「８８」と「１８」だけでしたが、「１３」や他にも有る そうです。
ホテルは「Sheraton internacional vista cataratas」で 部屋の窓から目の前に滝が見えていました。 通称「悪魔の喉笛」と呼ばれている滝の中心からは 水しぶきが蒸気の様に上がっていて、それがそのまま雲に なっていました。

これで表の説明は終わりです。このHPを作る為に使っている基本的なテクニックはほぼ出尽くしました。凝ったページでなければ、とりあえず作れるんではないでしょうか。これで初級編は終了です。