2019年10月06日(日)

• HTML入門
• Web
• HTML
• css
• WordPress

 表組み table（table｜テーブル）とその子要素、孫要素

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

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

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

正式名称

• table（table｜テーブル）
• tr（table row｜テーブル ロウ）
• th（table header cell｜テーブル ヘッダー セル）
• td（table data cell｜テーブル データ セル）
• caption（table caption｜テーブル キャプション）
• col（table column｜テーブル カラム）
• colgroup（table column group｜テーブル カラム グループ）
• tbead（table head｜テーブル ヘッド）
• tbody（table body｜テーブル ボディ）
• tfoot（table foot｜テーブル フット）

名称：

テーブル（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タグを用いた時のダメな例が下記になります。