最終更新日

table要素

table要素を使って、データを表の形式で定義することができます。表の行や列、データの種類などを、table要素の子要素となる各要素を使って指定します。HTML5では、単に項目を見やすくするためだけの理由でtable要素を使うべきではないとされており、特に音声読み上げブラウザへの対応など、アクセシビリティを考慮した形で、表の構造をわかりやすく設計することが推奨されています。

表の各行は、tr要素を使って表します。tr要素はtable要素内に直接、置くこともできますが、それよりもthead要素tbody要素など親となる要素を間に置くことで、表の構造をより明確にすることが可能です。

各行を表すtr要素内で、td要素を使って各セルを表します。td要素ではなくth要素を使うと、表の見出し行の各セルを定義できます。その場合に、表のデータ部分はtbody要素、見出し行はthead要素で囲むと、より構造がはっきりします。また、集計行など、表のまとめ部分はtfoot要素と使って囲むことが可能です。さらに、表の列をいくつかのグループに分けたい場合には、colgroup要素を指定できます。

表の概要や構造の説明は、table要素内にcaption要素として含めることができます。この情報は、すべてのユーザーに役立ちますが、特に音声読み上げブラウザなどを利用していて表を目で見ることのできないユーザーには重要です。caption要素では、表の目的を紹介し、基本的なセルの構造、傾向やパターン、表の使い方の指示なども含めることが求められています。

table要素では、グローバル属性のほかにborder属性を指定することができます。border属性は、以前は表の枠線の太さを指定するために使われていましたが、HTML5では、table要素が単にレイアウト目的ではないことを示す属性として、空文字列または「1」のみが値として指定可能です。border属性を指定すると、一般的なブラウザでは表の各セルに枠線が引かれます。

table要素は、Flowコンテンツの記述箇所で使用できます。

HTML5での変更点
・summary、align、background、bgcolor、border、cellpadding、cellspacing、frame、rules、width、datasrc、dataformatas、datapagesizeの各属性は廃止されました。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ 省略不可 Flowコンテンツを子にできる要素 caption / colgroup / thead / tfoot / tbody / tr
属性 説明
border 1 / 空文字 table要素がレイアウト目的ではないことを示します。値には「1」か空文字のみ指定可能です。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <table border="1">
    <caption>料金表</caption>
    <tbody>
      <tr>
        <th>商品名</th>
        <th>料金</th>
      </tr>
      <tr>
        <td>ハンバーガー</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>チーズバーガー</td>
        <td>120円</td>
      </tr>
    </tbody>
  </table>
</body>
参考文献:W3C HTML5「4.9.1 The table element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。