表組みの要素 0:14

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

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

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

カテゴリ

フロー・コンテンツ

コンテンツ・モデル

以下の順番で配置（このレッスンで紹介していない要素は除く）

1. 任意で1つのthead要素
2. それに続く１つのtbody要素または、1つ以上のtr要素
3. それに続く、任意で1つのtfoot要素

主な属性

border属性： この表がレイアウト目的ではないことを表す

table要素の使い方

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

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

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

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

ｔr要素は、table（テーブル） rows（ロウ）の略で表の行を表す要素です。

カテゴリ

なし

コンテンツ・モデル

0個以上のth要素、またはtd要素。

tr要素の使い方

tr要素は、table要素内の各行（1行ずつ）を<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>で囲みます。

<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>で囲みます。

<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>

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

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

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>

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

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

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

1. 「Chapter15」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考に、table要素、tr要素、th要素、td要素をマークアップ

<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>

3. 上書き保存し、ブラウザで確認

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

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

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

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

カテゴリ

なし

コンテンツ・モデル

0個以上のtr要素

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>で囲みます。

<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>

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

tfoot要素で、テーブルのフッターを表す。 23:10

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

カテゴリ

なし

コンテンツ・モデル

0個以上のtr要素

tfoot要素の使い方

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

<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>

<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>