table

table要素は、2次元の表(テーブル)を作ります。ul要素やol要素を1次元リストと呼ぶなら、table要素は2次元リストです。概念的にはカテゴライズする事で多次元の表を作れますが、表示の制約上、3次元以上の表は見づらいので、2次元の表だけを考えても構いません。

テーブルはform要素とそのコントロール要素程複雑ではありませんが、少々厄介です。ですから、ここでは最も望ましい形式からではなく、最も簡単な形式から説明していきます。

まず、用語を確認しておきます。

行(tr要素)を幾つか持ち、tr要素には幾つかセル(th要素、td要素)を持たせれば、文法的に正しいテーブルになります。

上の例を見れば判るように、テーブルは行を単位として書きます。行の中のセルは左から右へ流れ、全ての行が同じ数のセルを持つようにします。数が同じであればth要素かtd要素かは問われないので、意味に合わせて使い分けます。数が足りない行がある場合、足りない部分は空になってしまいますが、無様なだけであって、文法ミスにはなりません。しかしまあ、揃えた方が綺麗でしょう。

表の中でヘッダ的な情報を表すセルは、th要素でマークアップします。td要素がデータセルと呼ばれるのに対して、ヘッダセルと呼ばれます。

ヘッダ情報に当たる部分をth要素に置き換え、scope属性を付けました。scope属性はセルの適用範囲を簡単に指定するもので、colで列方向に、rowで行方向に、colgroupで列グループに、rowgroupで行グループに適用します。上の例では東京、大阪、福岡のセルにも使われています。これは、一行目のセルほどヘッダ情報としての意味は強くないけれども、それぞれの行の中ではヘッダ情報の役割を果たしていると考えられる為に付けたものです。勿論、scope属性はtd要素にもあります。

テーブルには、短い要約をキャプションとして、長めの説明をサマリとしてつける事が強く望まれます。特にグラフィカルブラウザではない場合、自分にとって必要の無いテーブルを飛ばしたり、構造を説明的文章から理解できる為、これらは大いに役に立つ事でしょう。それぞれcaption要素、summary属性で指定します。

summary属性を書くのは勿論table要素ですが、caption要素はtableの第1の子でなければなりません。また、caption要素はまだしも、summary属性は(特にグラフィカルブラウザにおいて)非常に冷遇されているので、全てのテーブルにsummary属性を持たせるのはちょっと大変かも知れません。

前述の通り、セルは列には含まれませんが、列に属しています。幅や背景など、列毎に共通のスタイルを適用したい時もあるでしょう。そんな時はcol要素を使うと便利です。また、列に意味上の繋がりがある場合、colgroup要素を使ってグループ化する事ができます。

col要素を使ったらcolgroup要素は使えませんし、colgroup要素を使えばcol要素はその子としてしか現れ得ません。何れの場合でも、列の指定は(あれば)caption要素とtr要素などの間で行います。なお、colgroup要素はcol要素を子に持つ事ができますが、一つでも持った場合はそのcolgroup要素のspan属性は無視されます。

col要素やcolgroup要素は、span属性で適用する列の数を指定する事ができます。今回は4列しか無いので大した事は無いですが、数が増えてくるとこの属性が本領を発揮します。

ちなみに、CSSでcol要素、colgroup要素に対して有効なプロパティは、background系、border系、width、visibilityです。

これまでのテーブルではtr要素を直接table要素の子にしてきましたが、行を論理的にグループ化できる場合は、thead要素、tfoot要素、tbody要素を用います。これらの要素(行グループ)を使った場合はtr要素をtable要素の子にする事はできなくなり、孫として(つまりthead要素、tfoot要素、tbody要素の子として)tr要素を書いていく事になります。

thead要素はテーブルのヘッダを、tfoot要素はフッタを、tbody要素は中身を内包します。順序に気を付けて下さい。 tbody要素はtfoot要素よりも後です。これは、フッタも役割としてはヘッダに近く、テーブルの内容が長大な場合、先にユーザーエージェントに知らせた方が良いものだからです。

ちなみに、Mozilla Firefox 2など一部のブラウザでは、印刷する際にテーブルが複数ページにまたがった場合、thead要素とtfoot要素の内容は毎ページ上下に複製してくれます。

thead要素やtfoot要素は省略可能ですが、tbody要素は省略できません。また、tbody要素は複数現れる事ができます。上の例では、XHTML 1.1の要素をモジュール別にtbody要素で括って並べてみました。

この辺りまで理解していれば、普通のテーブルは思い通りに作る事ができるでしょう。

時に、セルを幾つかの行や列にまたがらせたくなる事があります。複数の行や列にまたがったセルを「各行、各列のヘッダセル」のヘッダ情報にしたい時などです。行をまたぐにはrowspan属性を、列をまたぐにはcolspan属性を使います。

他のセルがまたいで来た所には、改めてセルを置く必要が無い事に気を付けて下さい。colspan属性やrowspan属性を含めて考えると、全ての行で5列になるようにしてあります。また、二つ以上のセルが同じ場所にまたいで来るとエラーになり、その扱いは未定義になります。

ヘッダ情報を持つセルが、適用されるデータセルに対して適切な位置(同じ行、あるいは同じ列)にあれば、scope属性で十分でした。しかし、scope属性では適用できない位置にデータセルがあるような場合、代わりにid属性とheaders属性を使います。

まず、ヘッダ情報を持つセル──th要素とは限りません──にid属性を持たせます。次に、ヘッダ情報の必要なデータセル全てにheaders属性を持たせ、そのセルのヘッダとなるセルのid属性値をIDREFSデータタイプで書き連ねます。

容易に想像できるように、かなり面倒です。できる事なら、構造を明快にしてscope属性を使える所は使った方がいいでしょう。セルのカテゴライズで紹介する場合のように、3次元以上のテーブルを作る場合使う必要が出てきます。

テーブルは普通、2次元の表です。つまり、下に伸びる軸と右に伸びる軸と、二つの軸を持ち(右から左に読む言語の場合はこの通りではないですが)、データセルはそれぞれの位置での値と考える事ができます。例えば、セルのまたがりで出した表で言えば、下に伸びる「基底クラスのメンバ」という軸が一つ、右側に伸びる「基底クラス指定子のアクセス指定子」という軸が一つ、合計二つ軸を持っています。それぞれの軸は、(たまたま同じ)public、protected、privateという位置を持っています。これを使うと、各データセルの内容は、派生クラスでのアクセス( 基底クラスのメンバ, 基底クラス指定子のアクセス指定子 )という2変数関数で表現できます。例えば派生クラスでのアクセス( public, public ) = publicですし、派生クラスでのアクセス( protected, private ) = privateです。

このテーブルに軸を導入し、ヘッダ情報も明示的にしてしてみましょう。ヘッダ情報が所属する軸はaxis属性で与えます。データセルが参照するヘッダ情報は、前述の通りheaders属性を使います。

先程、これらの軸はpublic、protected、privateの3つの位置を持っていると言いましたが、言葉を換えれば、これらのヘッダ情報を「アクセス指定子」「基底メンバ」というグループに分類したとも言えます。実際、axis属性はその程度の扱われ方しかしておらず、class属性と同じで、XSLTなどを使ってXHTML文書を再利用する時には役に立ちますが、HTMLとしては、仕様書でもaxis属性の扱いについて強制していない為、音声合成ユーザーエージェントなどでも、利用される事があるかも知れない程度です。

一方、headers属性はより実質的です。軸が二つまでなら全てscope属性で代用できますが、三つ以上になるとscope属性だけでは対応しきれない場合が出てきます。例えば、軸が「出張先」「日付」「用途」と三つあり、データセルがそれぞれの出費を持っている場合、データセルに適用すべきヘッダ情報も三つあり、最低一つの軸のヘッダ情報をheaders属性で与える必要があります(二つまではscope属性が使えます)。ヘッダとなるセルはaxis属性を使って「出張先」「日付」「用途」と、それぞれの軸に所属させますが、記述上(及び、グラフィカルブラウザとテキストブラウザでは表示上)の制約から、完全な3次元のテーブルは作れないので、やはりaxis属性は実質分類しかできません。

解説を参照して下さい。