表組みの要素

HTMLでカレンダーや、〇〇表を作るには<table>要素を使います。表組み(テーブル)は今まで紹介してきた要素と比べると、少々難しいので、まずは基本的な作り方を覚えるようにしましょう。

基本的な表組みに必要な要素
要素名 意味・役割
<table> 表を表す
<tr> 表の行を表す
<th> 表の見出しセルを表す
<td> 表の内容セルを表す

table要素

<table>要素は、を表す要素です。表(テーブル)を作る際は、まず、表全体をこの<table>要素で囲みます。

カテゴリ
フロー・コンテンツ
コンテンツ・モデル
以下の順番で配置(このレッスンで紹介していない要素は除く)
  1. 任意で1つの<thead>要素
  2. それに続く1つの<tbody>要素または、1つ以上の<tr>要素
  3. それに続く、任意で1つの<tfoot>要素
主な属性
border属性: この表がレイアウト目的ではないことを表す

サンプル

<table>要素の例
<table>
  名前 職種
  ボブ WEBディレクター見習い
  ムカミ WEBプログラマー見習い
  メアリー WEBデザイナー見習い
</table>

表組み(テーブル)を作る際はまず、全体を<table>要素で囲みます。そして、次に各行を<tr>要素でマークアップします。

tr要素

<tr>要素は、tableテーブル rowsロウの略で表のを表します。

カテゴリ
なし
コンテンツ・モデル
0個以上の<th>要素、または<td>要素。

サンプル

<tr>要素の例
<table>
  <tr>名前 職種</tr>
  <tr>ボブ WEBディレクター見習い</tr>
  <tr>ムカミ WEBプログラマー見習い</tr>
  <tr>メアリー WEBデザイナー見習い</tr>
</table>

<tr>要素は、上記のように表内の各行をマークアップします。そしてこの<tr>要素の中のデータを<th>要素、または<td>要素でマークアップします。

th要素

<th>要素は、tableテーブル headerヘッダー cellセルの略で、見出しのセルを表します。

カテゴリ
なし
コンテンツ・モデル
フレージング・コンテンツ

サンプル

<th>要素の例
<table>
  <tr>
    <th>名前</th>
    <th>職種</th>
  </tr>
  <tr>ボブ WEBディレクター見習い</tr>
  <tr>ムカミ WEBプログラマー見習い</tr>
  <tr>メアリー WEBデザイナー見習い</tr>
</table>

(テーブル)内のデータで見出しを表すものは、このように各見出しのセルを<th>要素で囲みます。そして、その内容を表すデータを<td>要素でマークアップします。

td要素

<td>要素は、tableテーブル dataデータ cellセルの略で、内容のセルを表します。

カテゴリ
なし
コンテンツ・モデル
フロー・コンテンツ

サンプル

<td>要素の例
<table>
  <tr>
    <th>名前</th>
    <th>職種</th>
  </tr>
  <tr>
    <td>ボブ</td>
    <td>WEBディレクター見習い</td>
  </tr>
  <tr>
    <td>ムカミ</td>
    <td>WEBプログラマー見習い</td>
  </tr>
  <tr>
    <td>メアリー</td>
    <td>WEBデザイナー見習い</td>
  </tr>
</table>
ブラウザでの表示例

RERUN

このように、その内容を表すデータを<td>要素でマークアップすることで、基本的な表組み(テーブル)は完成です。なお、<table>要素に、 border属性を使用し、属性値に 空の文字列 か "1" を指定することで、表に境界線を表示すると同時に、この表がレイウト(デザイン)目的ではないことを表せます。

<table border=" または、1">

サンプル

<table>要素にborder属性を使用した例
<table border="1">
  <tr>
    <th>名前</th>
    <th>職種</th>
  </tr>
  <tr>
    <td>ボブ</td>
    <td>WEBディレクター見習い</td>
  </tr>
  <tr>
    <td>ムカミ</td>
    <td>WEBプログラマー見習い</td>
  </tr>
  <tr>
    <td>メアリー</td>
    <td>WEBデザイナー見習い</td>
  </tr>
</table>
ブラウザでの表示例

RERUN

このborder属性は、視覚的表現の属性に思えるのでCSS(WEBサイトをデザインする言語)の役割に感じますが、この属性は前述した通り、この表がレイウト(デザイン)目的ではないことを表します。昔は、CSS(WEBサイトをデザインする言語)を使わずに、この<table>要素を使って、レイアウトを行なっていました。その際、表に境界線があっては邪魔なので、非表示にしていました。反対に境界線を表示する時は、本来の表(テーブル)として利用したい時なので、 border属性を使って境界線を表示することで、レイウト(デザイン)目的ではないことを表しています。ただし、境界線の太さや、種類、色に関しては、視覚的な目的になりますのでCSSで行います。

基本的な表組みを作ってみよう

それでは、<table><tr><th><td>を使って基本的な表組みを作ってみましょう。

  1. 「Chapter15」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、<table><tr><th><td>をマークアップ
Chapter15/index.html
<h1>僕のHTMLタグ一覧表</h1>
<table border="1">
  <tr>
    <th>要素名</th>
    <th>意味・役割</th>
    <th>カテゴリー</th>
  </tr>
  <tr>
    <td>p</td>
    <td>段落</td>
    <td>フロー・コンテンツ</td>
  </tr>
  <tr>
    <td>h1</td>
    <td>大見出し</td>
    <td>フロー・コンテンツ</td>
  </tr>
  <tr>
    <td>br</td>
    <td>改行</td>
    <td>
      <ul>
        <li>フロー・コンテンツ</li>
        <li>フレージング・コンテンツ</li>
      </ul>
    </td>
  </tr>
</table>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

テーブルのヘッダ、ボディ、フッタを明示的に表す

基本的な表(テーブル)は、上記のように作成します。ただし、上記のように一般的な表(テーブル)は、一番上の行が全て見出しになることが多いです。通常このような表をプリンターなどで印刷する場合で、それが複数ページにわたる際は、全てのページに見出しの行を印刷することが一般的です。その場合は、どこが見出しの行で、どこが内容部分かを明示的に表すことで、プリンターなどで印刷する際のサポートができます。

行をグループ化する要素
要素名 意味・役割
<thead> 表のヘッダ
<tbody> 表の内容
<tfoot> 表のフッタ

thead要素

<thead>要素は、tableテーブル headerヘッダーの略で、その行が見出し行であることを表します。

カテゴリ
なし
コンテンツ・モデル
0個以上の<tr>要素

サンプル

<thead>要素の例
<table border="1">
  <thead>
    <tr>
      <th>名前</th>
      <th>職種</th>
    </tr>
  </thead>
  <tr>
    <td>ボブ</td>
    <td>WEBディレクター見習い</td>
  </tr>
  <tr>
    <td>ムカミ</td>
    <td>WEBプログラマー見習い</td>
  </tr>
  <tr>
    <td>メアリー</td>
    <td>WEBデザイナー見習い</td>
  </tr>
</table>

このように、テーブルの一番上の行が全て見出しの場合は、その<tr>要素を<thead>要素で囲むことで、明示的に見出し行であることを表します。そして、内容部分の各行を<tbody>要素でマークアップすることで、表の内容部分であることを明示的に表します。

tbody要素

<tbody>要素は、tableテーブル bodyボディの略で、その行が内容部分の行であることを表します。

カテゴリ
なし
コンテンツ・モデル
0個以上の<tr>要素

サンプル

<tbody>要素の例
<table border="1">
  <thead>
    <tr>
      <th>名前</th>
      <th>職種</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ボブ</td>
      <td>WEBディレクター見習い</td>
    </tr>
    <tr>
      <td>ムカミ</td>
      <td>WEBプログラマー見習い</td>
    </tr>
    <tr>
      <td>メアリー</td>
      <td>WEBデザイナー見習い</td>
    </tr>
  </tbody>
</table>
ブラウザでの表示例

RERUN

これで、表(テーブル)のヘッダ部分と内容部分を明示的に表すことができます。なお、この例にはありませんが、テーブルのフッター部分を表す、<tfoot>要素もあります。

tfoot要素

<tfoot>要素は、tableテーブル footerフッターの略で、その行がフッタ部分の行であることを表します。

カテゴリ
なし
コンテンツ・モデル
0個以上の<tr>要素

サンプル

<tfoot>要素の例
<table border="1">
  <thead>
    <tr>
      <th>科目</th>
      <th>点数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>73</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>15</td>
    </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>合計</td>
    <td>88</td>
  </tr>
  </tfoot>
</table>
ブラウザでの表示例

RERUN

thead要素とtbody要素を使ってみよう

それでは、<thead><tbody>を使って明示的に表のヘッダと表の内容部分を表してみましょう。

  1. 「Chapter15」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、<thead><tbody>を追記
Chapter15/index.html
<h1>僕のHTMLタグ一覧表</h1>
<table border="1">
  <thead>
    <tr>
      <th>要素名</th>
      <th>意味・役割</th>
      <th>カテゴリー</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>p</td>
      <td>段落</td>
      <td>フロー・コンテンツ</td>
    </tr>
    <tr>
      <td>h1</td>
      <td>大見出し</td>
      <td>フロー・コンテンツ</td>
    </tr>
    <tr>
      <td>br</td>
      <td>改行</td>
      <td>
        <ul>
          <li>フロー・コンテンツ</li>
          <li>フレージング・コンテンツ</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

表組みの注意点

これらの表組み要素を使えば、様々なレイアウトを行うことができます。さらに、ここでは紹介していませんが、表(テーブル)の各セルを結合する属性などもあり、これらを使えば複雑なレイアウトも可能になります。ただし、<table>関係の各要素は、あくまで「表」のために使用する要素であり、レイアウト目的で使用することは好ましくありません。視覚的なレイアウトは全てCSSという言語で行うようにしましょう。

練習問題

「Chapter15」フォルダ内の「traning.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

ブラウザでの完成例

RERUN

解答例