テーブルをマスターしよう

このレッスンでは、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属性を使うことで、視覚に障害のある方が利用する補助技術（音声読み上げなど）を通じて、表の見出しがどの行または列に関連しているかをわかりやすく伝えることができます。

スクリーンリーダについては、後のレッスンで学びます。