テーブルをマスターしよう
このレッスンでは、HTMLの「入れ子構造」と「table」タグについて学びます。
HTMLの入れ子構造について
入れ子構造(いれこ)を例えるならば、ロシアのマトリョーシカ人形のようなイメージです。
マトリョーシカ人形は、一つの大きな人形の中に、さらに小さな人形が入っている形をしています。
同じように、HTMLの入れ子構造では、一つの要素の中に、さらに別の要素が入っている状態です。
下のコードでは、段落要素であるp
タグの中に画像であるimg
タグを入れています。
このように、「入れ子構造」でコードを書くことはよく使われており、HTMLに限らず、プログラミングにおいてとっても大切な概念です。
今回、学ぶtable
タグも、色々なタグを「入れ子」にして構成されています。
tableタグとは?
table
(テーブル)タグとは、表を作る時に使います。
例えば、下のような表を作ることができます。
tableタグの構成
表は、主にtable
(テーブル)タグの中に、行を作るtr
タグ、見出しを作るth
タグ、データを入れるtd
タグで構成されています。

table
タグの中身のタグ名は略なんだ。
- tr : table row (行)
- th : table header (見出し)
- td : table data (データ)
元々の語源を知ると覚えやすいね!
表を作る手順
まず、表はtable
タグで挟みます。table
タグは表の全体を表します。
<table>
<!-- ここに表の中身の内容を入力 -->
</table>
テーブルは行(row)と列(column)から成り立っています。
行はtr
タグで挟みます。tr
はテーブルの中の一行を表します。(まだ中身がないので分かりやすいように背景色をつけています)
横に一列、行ができました🙌
通常、表の最初の行は見出しとして使われます。この見出し行には、テーブルの項目を説明する見出し、(例でいうなら商品名、値段、産地)が入ります。
見出しの中身はth
タグで挟みます。
表の一番上の行に見出しが表示されました🙌
次に、行を追加して実際のデータを入れてみましょう!
見出しの行以外の行はデータ行として使われます。データ行には、実際のデータ(例でいうなら、りんご、198円、青森)が入ります。
データはtd
タグで挟みます。
さらに、見出しの部分をthead
(ティーヘッド)タグ、データの部分を表の本体を意味するtbody
(ティーボディ)タグで挟むことによって、見出し行とデータ行がはっきりと区別され、表が分かりやすくなります。
scope属性について
th
タグにはscope
(スコープ)属性を利用できます。scope
属性とは、th
タグの見出しがどの行または列に関連しているかを示す属性です。
<th scope="col">見出し</th>
- col : 見出しが列の見出しであることを示します。つまり、その列のデータと関連していることを意味します。
<th scope="row">見出し</th>
- row : 見出しが行の見出しであることを示します。つまり、その行のデータと関連していることを意味します。
コードだと下のような感じで表します。
<table>
<thead>
<tr>
<th scope="col">ジャンル</th>
<th scope="col">評価</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">A店</th>
<td>イタリアン</td>
<td>4.5</td>
</tr>
<tr>
<th scope="row">B店</th>
<td>寿司</td>
<td>4.2</td>
</tr>
</tbody>
</table>
このように、scope
属性を使うことで、視覚に障害のある方が利用する補助技術(音声読み上げなど)を通じて、表の見出しがどの行または列に関連しているかをわかりやすく伝えることができます。
スクリーンリーダについては、後のレッスンで学びます。