目次に戻る

table要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
  • 他の要素の規定による制限
内容モデル
  1. 1個以下のcaption要素。
  2. 上記に続いて、0個以上のcolgroup要素。
  3. 上記に続いて、1個以下のthead要素。
  4. 上記に続いて、下記のいずれか。
  5. 上記に続いて、1個以下のtfoot要素。
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、table。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、すべてのroleが指定可能。
視覚系ブラウザのデフォルトとして期待されるCSS

  table {
    display: table;
    unicode-bidi: isolate;
    box-sizing: border-box;
    border-spacing: 2px;
    border-collapse: separate;
    text-indent: initial;
  }
視覚系ブラウザにおいて期待されるレンダリング
ユーザーエージェントに対する特記事項
  • HTML構文においては、table要素の子としてtr要素が配置されている場合は、当該tr要素を囲むtbody要素のタグが省略されているものとして処理しなければならない。
意味・用法

表形式でデータを表す。

テーブルは、レイアウト補助として使用してはならない。

アクセシビリティ関連

私見・補足

table要素の本質は、「二次元配列のテキスト」なのか、それとも、「表というオブジェクト」なのか。さらにいえば、「二次元配列のテキストを表す論理要素」なのか、それとも、「テキストを表形式に整形する物理要素」なのか。さて、どっちだろうか。

表示確認

ソース

  <table>
    <caption>点数表</caption>
    <colgroup>
      <col span="1" style="background-color:yellow" />
    </colgroup>
    <colgroup style="background-color:green">
      <col span="1" />
      <col span="1" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col">回数</th>
        <th scope="col">Aさん</th>
        <th scope="col">Bさん</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">第1回</th>
        <td>1点</td>
        <td>3点</td>
      </tr>
      <tr>
        <th scope="row">第2回</th>
        <td>2点</td>
        <td>4点</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">合計</th>
        <td>3点</td>
        <td>7点</td>
      </tr>
    </tfoot>
  </table>
表示結果
点数表
回数 Aさん Bさん
第1回 1点 3点
第2回 2点 4点
合計 3点 7点