ばけらの HTMLリファレンス

TABLE 要素は、表の大枠を規定する要素です。TABLE要素の中には表題を示す CAPTION要素（一つ、なくても良い）、列について規定する COLGROUP要素もしくは COL要素（順不同でいくつでも、なくても良い）、データのヘッダ部を示す THEAD 要素（一つ、なくても良い）、フッタ部を示す TFOOT 要素（一つ、なくても良い）、データ本体を示す TBODY 要素（いくつでも良いが一つ以上必須）がこの順で含まれ得ます。

……と言われた瞬間に悟ったことと思いますが、テーブルは非常に複雑です。一朝一夕に使えるようになるものではありません。

TABLE 要素の属性はたくさんありますが、現在あるほとんどの属性は見栄えに関するもので、特に指定する必要のないものばかりです。

ただひとつ重要なのは summary 属性です。音声や点字出力の環境で表を利用する際には、この属性の値が読み上げられたり点字出力されます。これがないと表の全体像がつかめません。表の概要、出来れば行方向と列方向にどんな項目が並んでいるのかをおおざっぱに説明しておくと良いでしょう。この属性は必須とされているわけではありませんが、出来る限り指定するように求められています。

border 属性はテーブル枠の太さを指定します。<TABLE border> と書かれることがありますが、これは古いドラフト仕様 (HTML+, HTML3.0) で枠線を描画するか否かの二者択一式になっていた名残です。現在では、TABLE border は TABLE frame="border" の略記とみなされます。

width 属性は表全体の横幅を指定します。ピクセル数の指定も可能ですが、画面の小さい環境では邪悪な横スクロールバーが出るだけです。パーセンテージで指定しましょう。なお、この属性は非推奨とはされていませんが、表全体の横幅はスタイルシートで指定することが推奨されています。

時々間違える人がいますが、TABLE 要素には height という属性はありません（二大ブラウザは独自に対応しているようですが）。表の高さは内容量によって自動的に決まります。もっとも、スタイルシートで高さを指定することは可能で、優れたブラウザなら、中身が溢れるような場合はテーブルの中にスクロールバーを表示したりするかも知れません。

frame属性は、表の外枠の表示方法を規定します。h が Horizontal, v が Vertical の意であることを理解すれば属性値の意味は明白でしょう。

• void …… なし
• above …… 上のみ
• below …… 下のみ
• hsides …… 水平線のみ＝上と下
• lhs …… 左と上下
• rhs …… 右と上下
• vsides …… 垂直線のみ＝左右
• box …… マス状＝四方全て

もう一つ border という属性値がありますが、これは box と同じです。過去のドラフト仕様にしたがって書かれた <TABLE border> との互換性のために用意されています。

rules 属性は、表内部の罫線の表示法を規定します。

• none …… なし
• groups …… グループ間に線引き（各COLGROUP と 各TBODYの境に線引き）
• rows …… 行の間に線引き（横罫線のみ）
• cols …… 列の間に線引き（縦罫線のみ）
• all …… 全ての行間・列間に線引き（格子状）

cellspacing と cellpadding はそれぞれセル間の余白（枠線がある時は枠線の太さ）、セル内の余白（枠があるときは枠とデータとの間隔）を指定します。

align は表の配置を決定します。left や right を指定するとフロート化します。やはり非推奨です。

bgcolor はテーブル全体の背景色を指定できますが、この属性が HTML3.2 に存在しないことに注意して下さい。この背景色指定を認識しないブラウザもかなり存在します。迂闊な指定をすると、表内の文字全てが読めなくなることもあります。これまた非推奨です。

datasrc などは将来のバージョンで規定される予定のため、名前が予約されているものです。現時点で効力を発揮することはありません（ブラウザが独自に対応している可能性はありますが）。

CAPTION 要素はテーブルの表題を表します。<TABLE> タグのすぐ後ろに置いて下さい。一つの表には一つの表題しかつけられません。また、表題はなくても構いません。

align 属性で CAPTION を表の上下左右どこに表示するのかを指定できます。が、この属性は非推奨です。スタイルシートが推奨されます。

それから、CAPTION の中身はインライン要素です。H2 などを入れることは出来ませんので、注意してください。

COLGROUP はテーブル列のグループ構造を規定する要素です。論理構造を規定するものですが、<TABLE rules="groups"> と指定したときの表示結果にも影響します。

次のいずれかの方法でグループ化される列数を規定します。

• COL要素を使う方法 …… COLGROUP の中身に一つ又は複数の COL要素を含ませることによって列数を示します。各 COL要素の SPAN属性の値を合計したものがグループの列数となります。

• span属性を使う方法 …… COL 要素を含まない場合は span属性の値がグループの列数になります。省略時は 1とみなされます。

SPAN 属性の使用法はこの通りです。他の属性はすべてグループ内の列に継承させるためのもので、COLGROUP 自身の振る舞いを規定するものではありません。たとえば width 属性はグループ内の各々の列幅を規定します。グループそのものの幅を規定するわけではありません。各属性の意味については TH要素をご覧下さい。

なお、COLSPAN を指定したセルは左端（書字方向 rtl の環境では右端）の部分が属するグループに属します。

COL は特定列のセル全てに属性値を継承させるためのものです。COLGROUP と異なり、グループ化はしません。要素自身が意味を持たないという点では、DIV要素に似ています。

特定の列にクラス名を与えたり、幅を変えたり、文字揃えを変えたり出来ます。

属性は COLGROUP と全く同じです。

COLGROUP が列をグループ化するのに対し、THEAD, TBODY, TFOOT は行をグループ化します。COLGROUP と違って要素名が別れているのは、視覚系のブラウザで表示、印刷される際にそれぞれ異なる扱いを受けるためです。

THEAD 要素は、表上部の列を「ヘッダ」としてグループ化します。ヘッダグループは最初に表示され、表の上部に固定されます。表が複数ページに渡って印刷される際には、各ページの上部に印刷されます。

属性値は COLGROUP と同様、グループ内の行に継承させるためのものです。

span属性はありません。COLGROUP と異なり、THEAD 要素自身が TR を含む構造になっているので、中身の TR の数がそのままグループの行の数になります。

TFOOT 要素は行をフッタとしてグループ化します。THEAD と反対に、フッタは下部に固定されます。

注意すべきは、TFOOT が THEAD の次に現れる点です。表が表示される際には、ヘッダ部が表示されたあと、表の本体部分が表示される前にフッタ部が表示されることになります。これは巨大な表を逐次表示する際に分かりやすくする工夫です。従って、HTML文書中にも THEAD, TFOOT, TBODY の順で書くことになります。本体よりフッタが先に来るのです。

このため、TFOOT を使用した表は、HTML3.2 の表との互換性がありません。HTML3.2 対応のブラウザは THEAD要素も TFOOT要素も認識せず、単に TR の出現順に表示してしまいますから、フッタがヘッダの次に来てしまいます。

他の点は THEAD と同様です。

TBODY要素は TABLE の中に必ず出現しなければなりません。これは表の本体部分を表します。ヘッダ、フッタと区分するだけではなく、複数の TBODY 要素で本体部分をいくつかのグループに分けることもできます。

TFOOT の項で説明しましたが、TBODY は TFOOT より後に来ます。

TBODY 要素は開始タグも省略可能となっていますが、これは TABLE 内に THEAD も TFOOT もなく、かつ TBODY が一つしかないときに限ります。HTML3.2 の表を HTML4.0 として見ると、開始タグ終了タグ共に省略された TBODY要素を一つだけ含む表として解釈されることになります。

他の点は THEAD と同じです。

TR 要素は一つの行を表します。TH, TD を含みます。終了タグは省略可能です。

bgcolor 属性がありますが非推奨です。これも含め、属性は全て中身のセルに継承させるためものです。

TD はデータの入ったセル、TH は見出しのセルを表します。

普通、表の上と左一列に見出しセルを配置します。その際には、SCOPE 属性を指定して見出しの適用範囲を指定すると良いでしょう。たとえば、上端に配置された見出しセルには scope="col" と指定します。これで、その見出しが縦一列に有効だということが示され、読み上げ環境ではいちいちそのセルを読み上げてくれるでしょう。また、見出しが長いときは abbr属性で略称を指定します。すると、2度目からはその略称を読み上げてくれるでしょう。

ある TH がその列・行の見出しではないような場合もあります。そのようなときには TH に id 属性で ID をつけて、データセルの側に headers 属性でその ID を指定して下さい。これによって、データセルは見出しセルと関連づけられます。

以上はテーブルを読み上げるために必要なことなので、ぜひ守って下さい。普通は scope を使えば十分です。

また、axis 属性を使うと、各セルをカテゴリに関連づけることが出来ます。単純な表は行方向、列方向、２種類のカテゴリしか持ちませんが、この属性を使えば三次元的、四次元的なデータ構築も可能です。axis 属性にはそのセルの属するカテゴリ名をコンマ区切りで記述します。

rowspan と colspan は、それぞれ行方向、列方向にまたがるセルを作ります。たとえば colspan="2" を指定すると、そのセルは２列にまたがることになり、二つのセルが連結した形になります。0 を指定すると、そのセル位置から列グループ／行グループの端までが指定されたことになります。たとえば１０列あって列グループの指定がない表があったとして、３列目のセルに colspan="0" を指定すると、colspan="8" が指定されたのと同じになります。同じ表が５列ずつ二つの列グループに分かれていたとすると、３列目のセルの colspan="0" は colspan="3" と同じになります。

……が、ブラウザによっては 0 の値をうまく解釈せず、1 とみなしてしまうようです。

align は水平方向の文字揃えを、valign は垂直方向の文字揃えを規定します。COL や COLGROUP要素に指定すると、列全体に align が継承されるので楽です。align="char" は char 属性と合わせて使い、char 属性で指定した文字を同じ位置にそろえます。たとえば、数値表で小数点の位置をそろえるのに使用します。char 省略時には小数点が揃えられます。charoff 属性を使うと、その揃え文字がセル内のどの位置に置かれるかピクセル数か % で指定することができます。

nowrap 属性はセル内での改行を禁止します。横スクロールバーを生み出す元凶となりますので使うべきではありませんし、使うとしてもスタイルシートで代用できます。この属性は非推奨です。

width と height はセルの横幅、縦幅を指定しますが、width は TH や TD ではなく COL や COLGROUP に指定すべきです（HTML3.2 にはこれらの要素がなく、各列の横幅は TH や TD の width で指定するしかありませんでした）。また、セルの高さはデータ量によって自動調整されますから、height は指定すべきではありません。これらはいずれも非推奨です。

TD や TH の中にはデータが入りますが、インライン要素もブロック要素も入れることが出来ます。TD の中にまた別の TABLE を入れて、TABLE を入れ子にすることもできます（する人がいるかどうかはともかく）。