表組を HTML で記述する方法は少し難しい。表は縦・横の 2 次元的なものであるが,HTML はテキストファイル,つまり 1 次元的な文字の羅列であるからだ。
HTML で表を組むにあたっては“罫線を引いて……”という考え方から離れなくてはならない。“罫線を引いて,その中に書き込む”ではなく,“表のマス(セル)を縦・横に並べる”というふうに発想を変えなくてはならない。
表を組むためには,まず,“ここから〜ここまで表組”というのを記述する。
<TABLE>...</TABLE>
<TABLE BORDER>...</TABLE>
前者の場合,表の罫線は入らない。罫線をつけるためには,後者のようにキーワード BORDER をつける。いずれの場合も,前後は改行される。
この中に表の中身を書くのだが,“セルを並べる”ためには,縦・横がはっきりしなければならない。つまり,どこからどこまでが 1 つの行で,どこからがその次の行かというのがわかれば,縦方向の記述ができる。“ここから〜ここまで表の 1 行”を表すのに,行を明示する要素が必要となる。
<TR>...</TR>
これがないと,表は横方向にのびるばかりだ。終了タグ </TR> は省略可。
さらに,行の中にセルを“横方向に”並べればよい。セルも“ここから〜ここまで”の形をとり,
<TD>...</TD>
<TH>...</TH>
の 2 種類がある。<TD> がデータのはいる普通のセル。<TH> のほうが見出しのセルで,太字かつセンタリングで表現されることが多い。セルの幅は文字数や現在の画面サイズに合わせて適当な改行が入り,自動的に調整される。“ここまで”の </TD> と </TH> は省略できるが,</TABLE> は必須である。
これらを必要な数だけ繰り返して使えば表の 1 行ができあがり,さらに <TR>...</TR> を必要回数繰り返せば何行かにわたる表が組める。
このとき,1 行あたりのセルの数が違ったらどうなるのかと思われるかもしれないが,もっともセルの数が多い行を基準にレイアウトされるので心配ない。セルの数が少ない行は“空のセル”があるものと見なされる。
基本的に表のレイアウトは自動で,セルの中身が長いときは適当に折り返される。セルの中で <BR> など別の要素を用いてもよい。
まずは,例を見てみよう。
<TABLE BORDER>
<TR>
<TH>見出しのセルです。</TH>
<TD>横方向に伸びます。</TD>
<TD>途中で<BR>改行しても構いません。</TD>
</TR>
<TR>
<TD>表のセルです。</TD>
<TD>行あたりのセルの数は同じである必要はありません。</TD>
</TR>
<TR>
<TD>何も書かないと“空のセル”になります。→</TD>
<TD></TD>
<TD>3 行の表ができました。</TD>
</TR>
</TABLE>
見出しのセルです。 | 横方向に伸びます。 | 途中で 改行しても構いません。 |
---|---|---|
表のセルです。 | 行あたりのセルの数は同じである必要はありません。 | |
何も書かないと“空のセル”になります。→ | 3 行の表ができました。 |
表には表題をつけることができる。<TABLE> の直後で,
<CAPTION>...</CAPTION>
を使う。もちろん,表題はひとつしかつけられない。
表は“表”“行”“セル”という三重の“ここから〜ここまで”構造で記述する。行を積み重ねることで 2 次元の表を組んでいく。