目次に戻る

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

概要

カテゴリー
配置できる場所
  • 他の要素の規定による制限
内容モデル
  1. 1個以下のcaption要素
  2. 上記に続いて、0個以上のcolgroup要素
  3. 上記に続いて、1個以下のthead要素
  4. 上記に続いて、下記のいずれか。
  5. 上記に続いて、1個以下のtfoot要素
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、tableデフォルトrolerole属性値に指定することは、推奨されない。
  • デフォルト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点