表組み
まず最初に，簡単な例を挙げます．
| ひょう |
ひょー |
うっひょー |
| うひょ？ |
失礼 |
しました |
|
<TABLE BORDER=1>
<TR>
<TD>ひょう</TD>
<TD>ひょー</TD>
<TD>うっひょー</TD>
</TR>
<TR>
<TD>うひょ？</TD>
<TD>失礼</TD>
<TD>しました</TD>
</TR>
</TABLE>
|
右のようなタグで，左の表が書けます．
横の列（ロウ）を <TR> タグではさみ，さらにセルを <TD>
タグではさみます．
最初の <TABLE> タグのオプションの BORDER は，表の外側の飾りの幅です．
|
|
<TABLE BORDER=10>
<TR>
<TD>境界</TD>
<TD>太い</TD>
</TR>
</TABLE>
|
当然 BORDER=0 にもできます．このときは BORDER オプションを記述する必要はありません．
|
|
<TABLE>
<TR>
<TD>境界</TD>
<TD>無い</TD>
</TR>
</TABLE>
|
これでは表組みしていないように見えますが，セルの背景色を設定すると，結構使えます．上に挙げた例は左に
「表」，右にそのソースが書かれていますが，これも表組みです．境界を 0 にして，右側の背景色を白にしてます．[色見本]
|
|
<TABLE>
<TR>
<TD>右側の背景色を</TD>
<TD BGCOLOR="#FFFFFF">
白にする．
</TD>
</TR>
</TABLE>
|
もうお分かりだと思いますが，表をネストさせることも出来ます．表の中に表を入れるんですね．
|
|
<TABLE BORDER=1>
<TR>
<TD>表の中に</TD>
<TD>
<TABLE BORDER=1>
<TR>
<TD>表を</TD>
<TD>書けます</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
|
表の外側の飾りは BORDER で指定しましたが，他にもいくつかオプションがあります．セルスペーシングは，うーん，説明しづらいですから例を見ましょう．
|
|
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>セルスペーシング</TD>
<TD>10</TD>
</TR>
</TABLE>
|
あんまりかっこよくないですね．もうひとつあります．文字と表の飾りとの間隔が指定できます．
|
|
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>セルパッディング</TD>
<TD>10</TD>
</TR>
</TABLE>
|
これをうまく使えば，見やすい表にすることが出来るでしょう．
次は，表の大きさの制御です．
|
|
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD WIDTH="50%">表全体の幅</TD>
<TD>100%</TD>
</TR>
<TR>
<TD>左のセルの幅</TD>
<TD>50%</TD>
</TR>
</TABLE>
|
このように <TABLE> タグの中で WIDTH="100%"
を指定すると，表全体の幅が最大になります．50%にすれば半分です．また <TD>
タグの中で WIDTH="50%" とすると，そのセルの幅が表全体の50%，つまり半分になります．
それぞれ % で指定しましたが，ピクセルで指定することも出来ます．単に WIDTH="200"
と書けば，200ピクセルの幅を確保します．しかし，Netscape も InternetExplorer
も思った大きさになってくれない（特に表をネストさせたとき）ので，% で指定した方が楽でしょう．
| 左寄せ（デフォルト） |
| センタリング |
| 右寄せ |
セルの中で改行も
出来ます． |
|
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD>左寄せ（デフォルト）</TD>
</TR><TR>
<TD ALIGN=CENTER>センタリング</TD>
</TR><TR>
<TD ALIGN=RIGHT>右寄せ</TD>
</TR><TR>
<TD>セルの中で改行も<BR>
出来ます．</TD>
</TR>
</TABLE>
|
セルの中で水平方向の表示位置を指定します．<TD> タグのオプションで
ALIGN=CENTER, RIGHT, LEFT を指定します．LEFT はデフォルトです．
通常の文章のように <CENTER> タグなどを使うこともできますが，これも思ったように配置されない場合がありました．
縦
の
位
置
指
定 |
上 |
中 |
下 |
Baseline |
|
<TABLE BORDER=1>
<TR>
<TD>
縦<BR>の<BR>位<BR>置<BR>指<BR>定
</TD>
<TD VALIGN=TOP>上</TD>
<TD>中</TD>
<TD VALIGN=BOTTOM>下</TD>
<TD VALIGN=BASELINE>Baseline</TD>
</TR>
</TABLE>
|
セルの中で垂直方向の表示位置を指定するには VALIGN というオプションを使います．TOP,
CENTER, BOTTOM, BASELINE が使えます．CENTER はデフォルトです．BASELINE
はよく分かりません（^_^；
次からは，複雑な表組みの説明です．
|
|
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD ALIGN=CENTER COLSPAN="2">
コラム二つ分</TD>
</TR>
<TR>
<TD WIDTH="50%">一つ分</TD>
<TD>一個分</TD>
</TR>
</TABLE>
|
複数のコラムをまとめて一つにするには，<TD> タグのオプションで
COLSPAN="2" などとします．LaTeX とは違って，最初にロウ・コラムの数を宣言しないので，適当にコラムを作って
</TR> で閉じてやれば，次のロウに移ります．思ったより簡単です．
|
|
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD ROWSPAN="2" WIDTH="50%">
ロウ二つ分
</TD>
<TD>一つ分</TD>
</TR>
<TR>
<TD>一個分</TD>
</TR>
</TABLE>
|
今度は複数のロウをまとめて一つにします．<TD> タグのオプションに
ROWSPAN="2" などと書きます．このとき，<TR>
タグの位置に気を付けてください．後ろの <TR> タグには，一つのセルしかはさまれてません．
この２つのスパンの指定で，かなり複雑な表も作成することが出来ると思います．
| ヘッダスタイル |
| ロウ毎の背景色指定 |
複雑な表 |
表のキャプション
|
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TH COLSPAN="2">ヘッダスタイル</TH>
</TR>
<TR BGCOLOR="#FFFFFF">
<TD WIDTH="50%">
ロウ毎の背景色指定</TD>
<TD>複雑な表</TD>
</TR>
<CAPTION ALIGN=BOTTOM>
表のキャプション
</CAPTION>
</TABLE>
|
<TH> タグは <TD> タグと似ていますが，<TH>
タグによるセルの内容は自動的に太字になりセンタリングされます．
また，セルの背景色指定は <TD> タグのオプションで指定しましたが，<TR>
タグのオプションで指定すれば，そのロウの全てのセルの背景色を一度に指定できます．[色見本]
最後の <CAPTION> タグで，表にキャプションを付けられます．さすがに表番号までは出してくれません．オプションの
ALIGN に BOTTOM の代りに TOP を指定すると，表の上にキャプションが出ます．