table 要素

since: 31st/Aug./2001; last modified: 16th/Sep./2001

table 要素タイプはテーブル・モジュールに含まれており、 XHTML 1.1 の内容モデルでは、内容セット Table に含まれ、DTD では %BlkSpecial.class; に含まれます。従って、例えば body 要素タイプや div 要素タイプ の子要素として定義されています。

table 要素タイプは、表のコンテナとして働きます。表とは、複数の行と列に属する、複数の要素の集合です。 List は一次元の配列でしたが、 Table は二次元の配列を表現します。西欧諸語では、タイプライタなどで、インデントを揃えたテキスト列を「テーブル」と呼ぶ習慣があります。PCでもキーボードに「タブ」キーが残っています。

意味    要素タイプ    分類
段落    p             Block
リスト  ul, ol, dl    Block
ルビ    ruby          Inline
表      tabel         Blcok

<table summary="要素タイプの分類と内容モデル">
<tr>
  <th>意味</th>   <th>要素タイプ</th>    <th>分類</th>
</tr>
<tr>
  <td>段落</td>   <td>p</td>             <td>Blcok</td>
</tr>
<tr>
  <td>リスト</td> <td>ul, ol, dl</td>    <td>Blcok</td>
</tr>
<tr>
  <td>ルビ</td>   <td>ruby</td>          <td>Inline</td>
</tr>
<tr>
  <td>表</td>     <td>table</td>         <td>Blcok</td>
</tr>
</table>

表モジュール [私訳]

caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

要素	属性	最小内容モデル
caption	Common	(PCDATA | Inline)*
table	Common, border (Pixels), cellpadding (Length), cellspacing (Length), datapagesize (CDATA), frame ("void" | "above" | "below" | "hsides" | "lhs" | "rhs" | "vsides" | "box" | "border"), rules ("none" | "groups" | "rows" | "cols" | "all"), summary (Text), width (Length)	caption?, ( col* | colgroup* ), (( thead?, tfoot?, tbody+ ) | ( tr+ ))
td	Common, abbr (Text), align ("left" | "center" | "right" | "justify" | "char"), axis (CDATA), char (Character), charoff (Length), colspan (Number), headers (IDREFS), rowspan (Number), scope ("row", "col", "rowgroup", "colgroup"), valign ("top" | "middle" | "bottom" | "baseline")	(PCDATA | Flow)*
th	Common, abbr (Text), align ("left" | "center" | "right" | "justify" | "char"), axis (CDATA), char (Character), charoff (Length), colspan (Number), headers (IDREFS), rowspan (Number), scope ("row", "col", "rowgroup", "colgroup"), valign ("top" | "middle" | "bottom" | "baseline")	(PCDATA | Flow)*
tr	Common, align ("left" | "center" | "right" | "justify" | "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline")	(td | th)+
col	Common, align ("left" | "center" | "right" | "justify" | "char"), char (Character), charoff (Length), span (Number), valign ("top" | "middle" | "bottom" | "baseline"), width (MultiLength)	EMPTY
colgroup	Common, align ("left" | "center" | "right" | "justify" | "char"), char (Character), charoff (Length), span (Number), valign ("top" | "middle" | "bottom" | "baseline"), width (MultiLength)	col*
tbody	Common, align ("left" | "center" | "right" | "justify" | "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline")	tr+
thead	Common, align ("left" | "center" | "right" | "justify" | "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline")	tr+
tfoot	Common, align ("left" | "center" | "right" | "justify" | "char"), char (Character), charoff (Length), valign ("top" | "middle" | "bottom" | "baseline")	tr+

実装： DTD

テーブルの構造

table 要素

table 要素はブロックレベルの要素です。テーブルを包含するコンテナとして働きます。その内容モデルは次のように定義されています： caption?, ( col* | colgroup* ), (( thead?, tfoot?, tbody+ ) | ( tr+ ))

即ち、 table 要素の内容は三つに分かれます：

1. キャプション： caption 要素は一回以下 (?) 出現してよい
2. 列構造化： col 要素と colgroup 要素はゼロ回以上 (*) 出現してよく、
   • 出現するならばどちらか一方しか出現してはならない
3. テーブル本文： thead, tfoot, tbody 要素か tr 要素の何れか一方だけが出現してよく、
   • thead, tfoot, tbody 要素が出現する場合は、 thead, tfoot 要素が一回以下 (?) 出現してよく、 tbody 要素が一回以上 (+) 出現しなければならない
   • tr 要素が出現する場合は、 一回以上 (+) 出現しなければならない

次に代表的な例を示します：

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

<table>
  <caption></caption>
  <thead></thead>
  <tfoot></tfoot>
  <tbody></tbody>
  <tbody></tbody>
</table>

<table>
  <caption></caption>
  <thead></thead>
  <tbody></tbody>
  <tbody></tbody>
  <tbody></tbody>
</table>

<table>
  <caption></caption>
  <thead></thead>
  <tbody></tbody>
  <tbody></tbody>
  <tbody></tbody>
</table>

<table>
  <caption></caption>
  <col></col>
  <thead></thead>
  <tfoot></tfoot>
  <tbody></tbody>
</table>

<table>
  <caption></caption>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <tr></tr>
  <tr></tr>
</table>

テーブルは、視覚的には優れた表示方法ですが、非視覚系では内容が全く把握できない場合があります。非視覚系装置でも閲覧できるように、工夫するようにお勧めします。

table 要素には summary 属性が定義されています。これは、当該テーブルの概要を記述する為のものです。テーブルの概要や目的、データ構造などを記述すると、非視覚系装置利用者が閲覧する際の助けになります。

<table summary="これは二行二列の表の例です。">
  <tr><td>(0,0)</td><td>(0,1)</td></tr>
  <tr><td>(1,0)</td><td>(1,1)</td></tr>
</table>

table 要素では共通属性セット Common が定義されており、その中には国際化属性セット I18N も含まれています。ここに含まれる dir 属性によって、行内セルの配置方向が指定できます。つまり、最初の列を右端に置くか、左端に置くか指定できるのです。

tr, td, th 要素

最も単純なテーブルでは、 table 要素の直接の子要素には tr 要素しか現れません。 tr 要素は、テーブルの行 (Row) を表します。この内容に th 要素と td 要素を使って、セルをつくります。

<table summary="表の例">
  <tr> <th>(0,0)</th>  <th>(0,1)</th>  <th>(0,2)</th> </tr>
  <tr> <th>(1,0)</th>  <td>(1,1)</td>  <td>(1,2)</td> </tr>
  <tr> <th>(2,0)</th>  <td>(2,1)</td>  <td>(2,2)</td> </tr>
</table>

th 要素は見出し情報を含み、 td 要素はデータを含みます。その内容は文字データか、任意のブロックレベルまたはテキストレベルの要素 (Flow) を含み得ます。

<table>
  <tr>
    <td><p>こんにちは</p></td>
    <td><strong>本日は</strong>晴天なり。</th>
  </tr>
  <tr>
    <td>
    テーブル自身も入れられます。
      <table>
        <tr> <th>(0,0)</th>  <th>(0,1)</th> </tr>
        <tr> <th>(1,0)</th>  <td>(1,1)</td> </tr>
        <tr> <th>(2,0)</th>  <td>(2,1)</td> </tr>
      </table>
    </td>
    <td>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </td>
  </tr>
</table>

見出し情報に関しては、次のような属性を用いて、情報の構造を明確にすべきです：

th 要素と td 要素の属性

headers = idrefs

• 当該データセルに関する見出し情報を提供している見出しセルのリストを指定する。
• 属性の値は、目標セルの id 属性値の空白区切りリスト

scope = scope-name

• 当該見出しセルが見出し情報を提供する相手であるデータセルの集合を指定する。
• headers 属性の代わりに用いてよい。
• 許される属性値：
  • row: 当該セルを含む行の、当該セル以下の部分に対する見出し情報を提供する。
  • col: 当該セルを含む列の、当該セル以下の部分に対する見出し情報を提供する。
  • rowgroup: 当該セルを含む行グループの、当該セル以下の部分に対する見出し情報を提供する。
  • colgroup: 当該セルを含む列グループの、当該セル以下の部分に対する見出し情報を提供する。

abbr = text

• セル内容の省略形を提供するために用いる。
• 例えば、音声出力型の装置は、この属性値を、関連するセル内容の前につけて出力する。

axis = cdata

• 当該セルが含まれる「軸名」を指定できる。
• 逆にいえば、セルを任意の座標上に位置付けることができる。
• 或る th 要素に axis="場所" 与えれば、このセルを headers 属性で参照するセルは全て「場所」軸上のデータとみなされる。

以上のほかに、文字列揃えなど、セル内容の表示調整用の属性が定義されています。

ここで紹介した属性は詳細で複雑ですが、非閲覧環境利用者の可読性確保などを目的として、 abbr 属性と scope 属性は指定した方が良いでしょう。

<table summary="2真数と16進数">
<tr>
  <th abbr="Decilmal" scope="col">10進数</th>
  <td>00</td>  <td>01</td>  <td>02</td>  <td>03</td>
  <td>04</td>  <td>05</td>  <td>06</td>  <td>07</td>
  <td>08</td>  <td>09</td>  <td>10</td>  <td>11</td>
  <td>12</td>  <td>13</td>  <td>14</td>  <td>15</td>
</tr>
<tr>
  <th abbr="Binary" scope="col">2進数</th>
  <td>0000</td>  <td>0001</td>  <td>0010</td>  <td>0011</td>
  <td>0100</td>  <td>0101</td>  <td>0110</td>  <td>0111</td>
  <td>1000</td>  <td>1001</td>  <td>1010</td>  <td>1011</td>
  <td>1100</td>  <td>1101</td>  <td>1110</td>  <td>1111</td>
</tr>
<tr>
  <th abbr="Hexadecilmal" scope="col">16進数</th>
  <td>0</td>  <td>1</td>  <td>2</td>  <td>3</td>
  <td>4</td>  <td>5</td>  <td>6</td>  <td>7</td>
  <td>8</td>  <td>9</td>  <td>a</td>  <td>b</td>
  <td>c</td>  <td>d</td>  <td>e</td>  <td>f</td>
</tr>
</table>

単純な表であれば、見出しセルの作用方向は、行 (col) か列 (row) になるでしょうから、 scope 属性で作用方向を指定することができます。また、非視覚系出力装置を利用している方のために、 abbr 属性を与えるようにお勧めします。

複雑な表の場合は、 scope では指示ができない場合もあります。そのときは、 headers 属性を利用します。次の例は、 headers 属性と axis 属性の利用例です：

<table summary="旅行支出表">
  <tr>
    <th></th>
    <th abbr="食事" id="a1" axis="支出">食事</th>
   <th abbr="宿泊" id="a2" axis="支出">宿泊</th>
  </tr>
  <tr>
    <th abbr="Seattle" id="b1" axis="場所">Seattle</th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th abbr="8-Aug." id="b2" axis="日付">10-Aug.</th>
    <td headers="a1 b1 b2">37.74</td>
    <td headers="a2 b1 b2">112.00</td>
  </tr>
  <tr>
    <th abbr="9-Aug." id="b3" axis="日付">9-Aug.</th>
    <td headers="a1 b1 b3">27.28</td>
    <td headers="a2 b1 b3">112.00</td>
  </tr>
  <tr>
    <th abbr="San Jose" id="b4" axis="場所">San Jose</th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th abbr="10-Aug." id="b5" axis="日付">10-Aug.</th>
    <td headers="a1 b4 b5">96.25</td>
    <td headers="a2 b4 b5">120.00</td>
  </tr>
</table>

上記サンプルの表示例です：

座標軸「場所」には、二つの見出し "San Jose", "Seattle" が指定してあります。これらはそれぞれ id 属性値で b1, b4 が指定してあるので、 headers 属性値のリストに b1, b4 が含まれるセルは、「場所」軸上の値でもあります。

例えば、「シアトル」の「8月9日」の「食費」は "$27.28-" になっています。このセルは、 id 属性値が a1 b1 b3 を持っています。したがって、(支出, 場所, 日付) = (食事, Seattle, 9-Aug.) で指定できます。