表組みの要素 0:14

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

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

RERUN

表全体を、<table>タグで囲む 0:41

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

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

table要素の使い方

table要素は、表全体を<table></table>で囲みます。

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

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

tr要素で、行を作る。 2:05

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

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

tr要素の使い方

tr要素は、table要素内の各行(1行ずつ)<tr></tr>で囲みます。

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

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

見出しセルは、th要素。 4:08

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

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

th要素の使い方

th要素は、tr要素内の見出しのセル(マス)<th></th>で囲みます。

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

(テーブル)内のデータで、項目名などの見出しを表すものは、このth要素で囲みます。
そして、その見出しに対する内容をtd要素でマークアップします。

内容のセルセルは、td要素 5:22

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

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

td要素の使い方

td要素は、tr要素内の内容のセル(マス)<td></td>で囲みます。

<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" を指定することで、表に境界線を表示すると同時に、この表がレイウト(デザイン)目的ではないことを表せます。

border属性の使い方
<table border=" または、1">

border属性を使ったサンプル

<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で行います。

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

それでは、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

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

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

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

thead要素で、テーブルのヘッダーを表す。 21:10

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

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

thead要素の使い方

thead要素は、テーブルの上部にある見出しの行を<thead></thead>で囲みます。

<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要素で、テーブルの内容部分を表す。 22:18

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

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

tbody要素の使い方

tbody要素は、テーブルの内容を部分を表す行達を<tbody></tbody>で囲みます。

<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要素で、テーブルのフッターを表す。 23:10

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

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

tfoot要素の使い方

tfoot要素は、テーブルのフッターを部分を表す行を<tfoot></tbody>で囲みます。

<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要素を使ってみよう 25:34

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

  1. 「Chapter15」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、theadtbodyを追記
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という言語で行うようにしましょう。

練習問題 27:58

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

ブラウザでの完成例

RERUN

解答例

まとめ 37:33

テーブルの作成方法はわかりましたか?

  • テーブルは、table 要素で表す
  • 各行は、tr 要素で作成する
  • 各セルは、thまたは、td要素で指定する