LESSON 30分

テーブルでデータを表示しよう

ストーリー

先輩「スキル一覧とか、経験年数とか、表で見せたいデータってあるよね」

スプレッドシートみたいな表をHTMLで作れるんですか？

先輩「テーブルタグを使えば作れるよ。ちょっとタグが多いけど、パターンさえ覚えればすぐ書けるようになる」

テーブルの基本構造

html
<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>25</td>
  </tr>
  <tr>
    <td>鈴木花子</td>
    <td>30</td>
  </tr>
</table>

表示結果:

名前年齢
山田太郎25
鈴木花子30

テーブル関連タグ

タグ正式名役割
<table>Tableテーブル全体
<tr>Table Row行
<th>Table Header見出しセル（太字・中央揃え）
<td>Table Dataデータセル

覚え方

<table>       テーブル全体
  <tr>        行（Row）を作る
    <th>      見出しセル（Header）
    <td>      データセル（Data）

<thead> と <tbody>

テーブルをより構造的に書くために、ヘッダー部分とボディ部分を分けます。

html
<table>
  <thead>
    <tr>
      <th>スキル</th>
      <th>レベル</th>
      <th>経験年数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>初級</td>
      <td>1ヶ月</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>初級</td>
      <td>1ヶ月</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>中級</td>
      <td>6ヶ月</td>
    </tr>
  </tbody>
</table>
タグ役割
<thead>テーブルのヘッダー部分
<tbody>テーブルのデータ部分
<tfoot>テーブルのフッター部分（合計行など）

先輩「<thead> と <tbody> を使うと、CSSでスタイルを当てやすくなるんだ」

テーブルの構造図

<table>
├── <thead>          ... ヘッダー
│   └── <tr>         ... 行
│       ├── <th>     ... 見出しセル
│       └── <th>     ... 見出しセル
└── <tbody>          ... ボディ
    ├── <tr>         ... 行
    │   ├── <td>     ... データセル
    │   └── <td>     ... データセル
    └── <tr>         ... 行
        ├── <td>     ... データセル
        └── <td>     ... データセル

テーブルの注意点

テーブルはデータ表示用

用途適切か
データの表示（スキル一覧、価格表など）適切
ページのレイアウト不適切（CSSを使う）

昔はテーブルでページレイアウトを作ることがありましたが、現在は CSSでレイアウトを作る のが正しい方法です。

よくあるミス

ミス問題点対処法
<tr> を忘れるセルが正しく並ばない必ず行を作ってからセルを入れる
列数が揃っていない表が崩れる全行で同じ列数にする
<th> と <td> を混同見出しが分からなくなるヘッダー行は <th>、データ行は <td>

実践：テーブルを使ったページを作ろう

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テーブルの練習</title>
</head>
<body>
  <h1>自己紹介</h1>

  <h2>基本情報</h2>
  <table>
    <tbody>
      <tr>
        <th>名前</th>
        <td>山田太郎</td>
      </tr>
      <tr>
        <th>年齢</th>
        <td>25歳</td>
      </tr>
      <tr>
        <th>職業</th>
        <td>Webエンジニア（見習い）</td>
      </tr>
      <tr>
        <th>住所</th>
        <td>東京都</td>
      </tr>
    </tbody>
  </table>

  <h2>スキル一覧</h2>
  <table>
    <thead>
      <tr>
        <th>スキル</th>
        <th>レベル</th>
        <th>学習期間</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML</td>
        <td>学習中</td>
        <td>2週間</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>学習中</td>
        <td>1週間</td>
      </tr>
      <tr>
        <td>Excel</td>
        <td>中級</td>
        <td>1年</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

まとめ

ポイント内容
<table>テーブル全体を囲む
<tr>行を作る
<th>見出しセル（太字・中央揃え）
<td>データセル
<thead>/<tbody>ヘッダーとボディを構造的に分ける
用途データ表示に使う（レイアウトには使わない）

チェックリスト

  • <table>, <tr>, <th>, <td> の役割を理解した
  • <thead> と <tbody> を使ったテーブルが書ける
  • 列数を揃えてテーブルを作れる
  • テーブルをレイアウト目的で使ってはいけないことを理解した

次のステップへ

テーブルが作れるようになりました。ここまでのタグを組み合わせて、演習で自己紹介ページの骨組みを作りましょう。

推定読了時間: 30分