table 要素

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

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

名前table
分類Block
意味table
日本語テーブル、表

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

テーブルの原義table 要素による実現
意味    要素タイプ    分類
段落    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 要素の何れか一方だけが出現してよく、

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

table 要素の内容パターン
1.2.3.
<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>
4.5.6.
<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
scope = scope-name
abbr = text
axis = cdata

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

ここで紹介した属性は詳細で複雑ですが、非閲覧環境利用者の可読性確保などを目的として、 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>

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

食事 宿泊
Seattle
10-Aug. 37.74 112.00
9-Aug. 27.28 112.00
San Jose
10-Aug. 96.25 120.00

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

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


Copyright © 2001, SUGAI, Manabu. All rights reserved. 著作権は放棄していません。
SEO [PR] ”š‘¬!–³—¿ƒuƒƒO –³—¿ƒz[ƒ€ƒy[ƒWŠJÝ –³—¿ƒ‰ƒCƒu•ú‘—