IT工房

logo

Tableの使い方詳説〜HTML & CSS（１）

Tableの使い方詳説〜HTML & CSS（１）

テーブルの記述はHTMLもCSSも面倒な設定や思う通りに行かない場合があったり、思わぬ落とし穴に悩むこともあります。
今回はテーブルについてしっかりと学習していきます。

HTMLでのテーブル関連タグの使い方

テーブル作成に最低限必要な基本的なタグは「table」、「tr」、「td」の３つのタグです。これさえあれば最低限のテーブルはできます。

２行３列のテーブルの例（border属性は見やすいように入れています）

<table border="1">
 <tr>
  <td>あか</td><td>き</td><td>あお</td>
 </tr>
 <tr>
  <td>赤</td><td>黄</td><td>青</td>
 </tr>
</table>

表示すると以下のようになります。

あか き あお
赤 黄 青

はい、これで終わりといきたいところですが、表は権威あるデータを表示したりとかで、その内容をちゃんと説明しなさいと結構うるさい仕様書になっています。それから基本的に表をレイアウトの骨組みにはしてはいけません。

テーブル関連タグのコンテンツモデル

まずはコンテンツモデルの確認からです。

タグ名
table
カテゴリ
フロー・コンテンツ
コンテンツモデル
以下の順番で配置
1.caption要素を1つ（任意）
2.colgroup要素を0個以上
3.thead要素を1つ（任意）
4.tbody要素を0個以上、またはtr要素を1つ以上
5.tfoot要素を1つ（任意）
特性
表の大枠
タグ名
tr
カテゴリ
コンテンツモデル
th要素またはtd要素を0個以上
特性
行を表します
タグ名
td
カテゴリ
セクショニング・ルート
コンテンツモデル
フロー・コンテンツ
特性
データセル

コンテンツモデルに記述された内容を見るとtableタグに続く要素は次のようになっています。
注意：HTML5.1から横列（行）をグループ化する要素の記述順序が変更されました。thead,tbody,tfootの順になっています。

  1. caption要素を1つ（任意）
  2. colgroup要素を0個以上
  3. thead要素を1つ（任意）
  4. tbody要素を0個以上、またはtr要素を1つ以上
  5. tfoot要素を1つ（任意）

それぞれの要素の特徴は次の通りです。

caption要素

「caption」は「table」のタイトルを表します。
「table」タグの「summary属性」が廃止されたことを考えると、その代わりに「caption」の中に「details」タグを使用するのも良いアイデアかもしれません。

	 		
 <caption>
    3年２組中間テスト成績表
    <details>
    <summary>列の構成</summary>
    <p>国語、英語、数学、平均、評価</p>
    </details>
  </caption>

colgroup要素とcol要素

「colgroup」は、1つ以上の縦列（カラム）のグループ化を行います。
「colgroup」には「span属性」があり、この値に正の整数を入れると、グループ化する縦列の数を指定することになります。
「span属性」を省略したら1列をグループ化したことになります。

「colgroup」は子要素として「col要素」を持つことができます。「col要素」は、列グループに含まれる1つ以上の列を表します。
ただし、「colgroup要素」に「span属性」が指定されている場合は、「col要素」を配置することはできません。
ここがわかりにくいところですが、「colgroup」は「span属性」を持つ場合には空要素となり、子孫要素を含むことはできません。 反対に「span属性」を持たない場合には、子要素として「col」を含むことができます。その場合は終了タグが必要になります。

「colgroup」とspan属性を使った例

<table border="1">
  <caption>
    3年２組中間テスト成績表
    <details>
    <summary>列の構成</summary>
    <p>氏名、国語、英語、英語2、平均、評価</p>
    </details>
  </caption>
  <colgroup id="name"></colgroup>
  <colgroup id="language"></colgroup>
  <colgroup id="english" span="2">
  <colgroup id="average"></colgroup>
  <colgroup id="evaluation"></colgroup>
  <thead>
  <tr>
    <th scope="col">氏名</th>
    <th scope="col">国語</th>
    <th scope="col">英語</th>
    <th scope="col">英語２</th>
    <th scope="col">平均</th>
    <th scope="col">評価</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th scope="row">山田太郎</th>
    <td>80</td>
    <td>90</td>
    <td>60</td>
    <td>76</td>
    <td>B</td>
  </tr>
  <tr>
    <th scope="row">鈴木花子</th>
    <td>90</td>
    <td>80</td>
    <td>70</td>
    <td>80</td>
    <td>A</td>
  </tr>
  <tr>
    <th scope="row">上田一郎</th>
    <td>70</td>
    <td>90</td>
    <td>90</td>
    <td>83</td>
    <td>A</td>
  </tr>
  <tr>
    <th scope="row">長島次郎</th>
    <td>70</td>
    <td>80</td>
    <td>80</td>
    <td>76</td>
    <td>B</td>
  </tr>
  <tr>
    <th scope="row">井上恵子</th>
    <td>90</td>
    <td>70</td>
    <td>80</td>
    <td>80</td>
    <td>A</td>
  </tr>
  <tr>
    <th scope="row">中村三郎</th>
    <td>60</td>
    <td>80</td>
    <td>90</td>
    <td>76</td>
    <td>B</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <th scope="col">氏名</th>
    <th scope="col">国語</th>
    <th scope="col">英語</th>
    <th scope="col">英語2</th>
    <th scope="col">平均</th>
    <th scope="col">評価</th>
  </tr>
  </tfoot>
</table>

「colgroup」と「col」を使った例

<table border="1">
  <caption>
    3年２組中間テスト成績表
    <details>
    <summary>列の構成</summary>
    <p>氏名、国語、英語、英語2、平均、評価</p>
    </details>
  </caption>
  <colgroup id="name"></colgroup>
  <colgroup id="language"></colgroup>
  <colgroup>
    <col id="english" span="2">
  </colgroup>
  <colgroup id="average"></colgroup>
  <colgroup id="evaluation"></colgroup>
  <thead>
  <tr>
    <th scope="col">氏名</th>
    <th scope="col">国語</th>
    <th scope="col">英語</th>
    <th scope="col">英語２</th>
    <th scope="col">平均</th>
    <th scope="col">評価</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th scope="row">山田太郎</th>
    <td>80</td>
    <td>90</td>
    <td>60</td>
    <td>76</td>
    <td>B</td>
  </tr>
  <tr>
    <th scope="row">鈴木花子</th>
    <td>90</td>
    <td>80</td>
    <td>70</td>
    <td>80</td>
    <td>A</td>
  </tr>
  <tr>
    <th scope="row">上田一郎</th>
    <td>70</td>
    <td>90</td>
    <td>90</td>
    <td>83</td>
    <td>A</td>
  </tr>
  <tr>
    <th scope="row">長島次郎</th>
    <td>70</td>
    <td>80</td>
    <td>80</td>
    <td>76</td>
    <td>B</td>
  </tr>
  <tr>
    <th scope="row">井上恵子</th>
    <td>90</td>
    <td>70</td>
    <td>80</td>
    <td>80</td>
    <td>A</td>
  </tr>
  <tr>
    <th scope="row">中村三郎</th>
    <td>60</td>
    <td>80</td>
    <td>90</td>
    <td>76</td>
    <td>B</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <th scope="col">氏名</th>
    <th scope="col">国語</th>
    <th scope="col">英語</th>
    <th scope="col">英語2</th>
    <th scope="col">平均</th>
    <th scope="col">評価</th>
  </tr>
  </tfoot>
</table>

表の表示は「colgroup」と「span」を使った例と「colgroup」と「col」を使った例のどちらも変わりません。
けれども、「colgroup」でグループ化したものは意味的にグループ化され、「col」でグループ化したものは単に列をまとめただけとなります。

横列（行）をグループ化する「thead要素」、「tbody要素」、「tfoot要素」

thead要素

横列（行）をグループ化するには、「thead」、「tbody」、「tfoot」を使用します。記述の順番はHTML5.1以前は「thead」、「tfoot」、「tbody」の順番でしたが、HTML5.1以降は「thead」、「tbody」、「tfoot」の順に記述するようになっています。
thead要素は、列ラベル（ヘッダー）を構成する行のブロックを表します。
この要素の直接の子要素は0個以上の「tr要素」となります。

tbody要素

表のデータの本体を構成する行のブロックを表します。
この要素の直接の子要素は0個以上の「tr要素」となります。

tfoot要素

列のフッターを構成する行のブロックを表します。
この要素の直接の子要素は0個以上の「tr要素」となります。

「tr要素」

「thead要素」、「tbody要素」、「tfoot要素」の直接の子要素として配置されます。
テーブルの中で行を表します。
「tr要素」の中に直接入れる要素は「th要素」または、「td要素」となります。

「td要素」

これはセルを表します。
「tr要素」の子として存在します。「td要素」の中にはフローコンテツ（ほぼ全ての要素）が入ります。

「th要素」

th要素はセルの一種ですが、見出しセル（table header cell）を表します。