表組み table(table|テーブル)とその子要素、孫要素

基本、表組みに使うタグとして用いるのがtableタグとその子要素のタグたちです。昔その仕様を勘違いしたWebデザイナー達がレイアウト要素として用い、大変になった時期もありました。本来、しっかりと定義されたtableの仕様をちゃんと理解して使いましょう。

表組みを形成する時に使うのがtableタグです。そしてその子要素には、trタグ、thタグ、tdタグなどがあり表組みを形成しています。はじめに簡素な表組みを見ながらその構造を理解しましょう。

上記は三列、三段の簡単な表組みです。セルとなる枠は全部で9個あります。上段1行目が項目の入るセルになり、項目を記述セルのタグはthタグを用います。一行を形成するのがtrタグです。tableタグの子要素はこのtrタグになります。そのtrタグの子要素として扱うのが項目を入れるthタグとデータを入れるtdタグになります。

正式名称

名称:
テーブル(table)
書式:
<table>~</table>
カテゴリ:
パルパブルコンテンツ、フローコンテンツ
コンテンツモデル:
※下記の条件で記述可能
1. 任意で1つのcaption要素
2. 0個以上のcolgroup要素
3. 任意で1つのthead要素
4. 0個以上のtbody要素か、1個以上のtr要素
5. 任意で1つのtfoot要素
6. 任意の場所に1個以上のスクリプトサポート要素
(スクリプトサポート要素とは<script>要素または<template>要素)

※上記のコンテンツモデルの内容は複雑で難解なのですが、簡単にいうと子要素として1個以上のtr要素が必要ということです。うむ!?難解だ。w

tableタグを用いた時のダメな例が下記になります。

関連記事