LESSON 30分

ストーリー

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

スプレッドシートみたいな表を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>

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

<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でスタイルを当てやすくなるんだ」

テーブルの構造図

graph TD
    A["&lt;table&gt;"] --> B["&lt;thead&gt;<br>ヘッダー"]
    A --> C["&lt;tbody&gt;<br>ボディ"]
    B --> D["&lt;tr&gt; 行"]
    D --> E["&lt;th&gt; 見出しセル"]
    D --> F["&lt;th&gt; 見出しセル"]
    C --> G["&lt;tr&gt; 行"]
    C --> H["&lt;tr&gt; 行"]
    G --> I["&lt;td&gt; データセル"]
    G --> J["&lt;td&gt; データセル"]
    H --> K["&lt;td&gt; データセル"]
    H --> L["&lt;td&gt; データセル"]

    style A fill:#dbeafe,stroke:#2563eb
    style B fill:#d1fae5,stroke:#059669
    style C fill:#d1fae5,stroke:#059669
    style D fill:#fef3c7,stroke:#d97706
    style E fill:#f3f4f6,stroke:#9ca3af
    style F fill:#f3f4f6,stroke:#9ca3af
    style G fill:#fef3c7,stroke:#d97706
    style H fill:#fef3c7,stroke:#d97706
    style I fill:#f3f4f6,stroke:#9ca3af
    style J fill:#f3f4f6,stroke:#9ca3af
    style K fill:#f3f4f6,stroke:#9ca3af
    style L fill:#f3f4f6,stroke:#9ca3af

テーブルの注意点

テーブルはデータ表示用

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

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

よくあるミス

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

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

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