表組みの要素 0:14
HTMLでカレンダーや、〇〇表を作るにはtable
要素を使います。表組み(テーブル)は今まで紹介してきた要素と比べると、少々難しいので、まずは基本的な作り方を覚えるようにしましょう。
RERUN
表全体を、<table>
タグで囲む
0:41
table
要素は、表を表す要素です。
表(テーブル)を作る際は、まず、表全体をこのtable
要素で囲みます。
table
要素の使い方
table
要素は、表全体を<table>
〜 </table>
で囲みます。
<table>
要素の例<table>
名前 職種
ボブ Webディレクター見習い
ムカミ Webプログラマー見習い
メアリー Webデザイナー見習い
</table>
このように、表組み(テーブル)を作る際はまず、全体をtable
要素でマークアップします。
そして、次に各行をtr
要素で作って行きます。
tr
要素で、行を作る。
2:05
tr
要素は、
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
要素は、
- カテゴリ
- なし
- コンテンツ・モデル
- フレージング・コンテンツ
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
要素は、
- カテゴリ
- なし
- コンテンツ・モデル
- フロー・コンテンツ
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
要素に、
属性を使用し、属性値に 空の文字列 か "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
要素を使って基本的な表組みを作ってみましょう。
- 「Chapter15」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に、
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>
- 上書き保存し、ブラウザで確認
RERUN
テーブルのヘッダ、ボディ、フッタを明示的に表す 19:28
基本的な表(テーブル)は、上記のように作成します。
ただし、上記のように一般的な表(テーブル)は、一番上の行が全て見出しになることが多いです。
通常このような表をプリンターなどで印刷する場合で、それが複数ページにわたる際は、全てのページに見出しの行を印刷することが一般的です。
その場合は、どこが見出しの行で、どこが内容部分かを明示的に表すことで、プリンターなどで印刷する際のサポートができます。
thead
要素で、テーブルのヘッダーを表す。
21:10
thead
要素は、
- カテゴリ
- なし
- コンテンツ・モデル
-
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
要素は、
- カテゴリ
- なし
- コンテンツ・モデル
-
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
要素は、
- カテゴリ
- なし
- コンテンツ・モデル
-
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
要素を使って明示的に表のヘッダと表の内容部分を表してみましょう。
- 「Chapter15」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に、
thead
、tbody
を追記
<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>
- 上書き保存し、ブラウザで確認
RERUN
表組みの注意点
これらの表組み要素を使えば、様々なレイアウトを行うことができます。
さらに、ここでは紹介していませんが、表(テーブル)の各セルを結合する属性などもあり、これらを使えば複雑なレイアウトも可能になります。
ただし、table
関係の各要素は、あくまで「表」のために使用する要素であり、レイアウト目的で使用することは好ましくありません。
視覚的なレイアウトは全てCSSという言語で行うようにしましょう。
練習問題 27:58
「Chapter15」 -> 「quest」フォルダ内の「 index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
RERUN
まとめ 37:33
テーブルの作成方法はわかりましたか?
- テーブルは、
table
要素で表す - 各行は、
tr
要素で作成する - 各セルは、
th
または、td
要素で指定する