Section 1 : 表組(1) ― 行グループ

 表組はいくつもの“ここから〜ここまで”を利用して 1 次元のテキストから 2 次元を作り出すものであった。ところで,実世界の表は,これまでの HTML で書き尽くせるような単純なものばかりではない。表の構造をうまく記述し,それらを的確に表現する方法を見てみよう。

表組の構造

 身近にある表を眺めてほしい。1 枚の表が,いくつかの部分から構成されていることに気づくはずだ。何行かがひとくくりになっていたり,また何列かがひとくくりになっていたり,という具合である。

 さらに複雑なものでは,2 次元的に書かれてはいるが,実際は3次元的な表を並べて紙面に収めているものもあるだろう。表組の構造は,実は思ったより複雑なのである。

 ここからしばらく,表組の構造を記述するにあたって簡単なものを解説していく。一見,面倒に見えるが,実はこれは表を書くにあたってかなり効率的な方法になる。また,記述した構造は表示に反映され,よりわかりやすい表を提供することにもつながる。

行のグループ化

 まずは,表組の“行”をグループ化する方法を見てみよう。まずは一般的な表,たとえば統計表を思い浮かべてほしい。項目の見出しがある部分,データのある本体,合計などが書かれる部分,というふうに分けることができるだろう。これらを HTML でグループ化する。

<THEAD>...</THEAD>
<TBODY>...</TBODY>
<TFOOT>...</TFOOT>

 <THEAD> が見出しなどを書くヘッダのグループ,<TBODY> が表の本体,<TFOOT> がフッタのグループになる。ヘッダ・フッタのグループはあってもなくてもよい。しかし,1 つの表につきそれぞれ 2 つ以上作ることはできない。表の本体は 1 つの表につき少なくとも 1 つはなくてはならない。

 </THEAD></TBODY></TFOOT> はいずれも省略してよい。とくに,表が 1 つの <TBODY> からなるときは <TBODY></TBODY> のいずれも省略して,<TR> を直接書いても構わない。今まで見てきた表はどれもすべての行が 1 つの <TBODY> に入っていると見なしていたのである。

 これら 3 種類のグループの間には順序が決められている。これを考慮すると,3 種類のグループを 1 つずつ含む表は次のような形になる。

<TABLE>
  <THEAD>
    <TR>...(ヘッダグループ)...
  <TFOOT>
    <TR>...(フッタグループ)...
  <TBODY>
    <TR>...(本体のグループ)...
</TABLE>

 記述は <THEAD><TFOOT><TBODY> の順で行うが,表示は <THEAD><TBODY><TFOOT> の順でなされることに注意しよう。当然ながら,それぞれのグループは <TR> を少なくとも 1 つ含んでいなければならない。

 なぜこのようなグループ化をするかというと,たとえば表がひじょうに大きく 1 画面に収まらないときなどに,ヘッダグループとフッタグループはスクロールせず,本体のみがスクロールするという芸当に使うことが考えられる。そうすれば,つねに表の各列が何を表すかというのが把握できるだろう。印刷の時も同様で,2 ページ以上になってしまったときにそれぞれのページの上下にヘッダ・フッタグループを印刷しておける。このような場合を想定して,<THEAD><TFOOT><TBODY> の順で書くのである。

 また,行グループは列グループとあわせて罫線の引き方を指定し,見やすい表を作ることができる。

 行をグループ化した表を見てみよう。

<TABLE BORDER>
  <CAPTION>クォークの種類と基本的性質</CAPTION>
  <THEAD>
    <TR>
      <TH>世代</TH>
      <TH>粒子名</TH><TH>質量</TH>
      <TH>電荷</TH><TH>スピン</TH><TH>バリオン数</TH>
    </TR>
  <TBODY>
    <TR>
      <TD ROWSPAN="2" ALIGN="center">1</TD>
      <TD>アップ</TD><TD>0.31GeV</TD>
      <TD>2/3</TD><TD>1/2</TD><TD>1/3</TD>
    </TR>
    <TR>
      <TD>ダウン</TD><TD>0.31GeV</TD>
      <TD>-1/3</TD><TD>1/2</TD><TD>1/3</TD>
    </TR>
  <TBODY>
    <TR>
      <TD ROWSPAN="2" ALIGN="center">2</TD>
      <TD>チャーム</TD><TD>1.5GeV</TD>
      <TD>2/3</TD><TD>1/2</TD><TD>1/3</TD>
    </TR>
    <TR>
      <TD>ストレンジ</TD><TD>0.55GeV</TD>
      <TD>-1/3</TD><TD>1/2</TD><TD>1/3</TD>
    </TR>
  <TBODY>
    <TR>
      <TD ROWSPAN="2" ALIGN="center">3</TD>
      <TD>トップ</TD><TD>174GeV</TD>
      <TD>2/3</TD><TD>1/2</TD><TD>1/3</TD>
    </TR>
    <TR>
      <TD>ボトム</TD><TD>5.5GeV</TD>
      <TD>-1/3</TD><TD>1/2</TD><TD>1/3</TD>
    </TR>
</TABLE>

 上の表組が,1 つのヘッダグループと,クォークの世代によって 3 つの本体のグループとに分けられているのがおわかりいただけると思う。

 また,HTML 4.01 では,ROWSPAN 属性を用いて複数のセルをつなげるとき,そのセルは行グループをまたいではならない。

 NN4  行のグループ化はサポートされない。