tableタグの書き方｜HTMLテーブル（表）の作り方を基礎から解説

HTMLのテーブルとは？

<table> タグを使うと、HTMLでデータを表（テーブル）形式で表示できます。価格比較・スペック一覧・スケジュール・データ整理などに使われます。

---

テーブルの基本構造

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中太郎</td>
      <td>28</td>
      <td>Webデザイナー</td>
    </tr>
    <tr>
      <td>鈴木花子</td>
      <td>32</td>
      <td>ディレクター</td>
    </tr>
  </tbody>
</table>

---

テーブル関連タグ一覧

タグ	役割
<table>	テーブル全体を囲む
<thead>	ヘッダー行グループ（列見出しの行）
<tbody>	ボディ行グループ（データ行）
<tfoot>	フッター行グループ（合計行など）
<tr>	テーブルの行（Table Row）
<th>	ヘッダーセル。デフォルトで太字・中央揃え
<td>	データセル（Table Data）
<caption>	テーブルのタイトル（表の上に表示）

---

captionタグ｜テーブルにタイトルをつける

<table>
  <caption>2026年 Webツール料金比較</caption>
  <thead>
    <tr>
      <th>ツール名</th>
      <th>無料プラン</th>
      <th>有料プラン</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Canva</td>
      <td>あり</td>
      <td>月額1,500円〜</td>
    </tr>
    <tr>
      <td>Figma</td>
      <td>あり</td>
      <td>月額$15〜</td>
    </tr>
  </tbody>
</table>

---

colspan・rowspan｜セルを結合する

colspan（横方向に結合）

<table>
  <tr>
    <!-- 2列分を結合 -->
    <th colspan="2">氏名</th>
    <th>スコア</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>太郎</td>
    <td>92</td>
  </tr>
</table>

rowspan（縦方向に結合）

<table>
  <tr>
    <!-- 2行分を結合 -->
    <td rowspan="2">午前</td>
    <td>HTML講座</td>
  </tr>
  <tr>
    <td>CSS講座</td>
  </tr>
</table>

---

scope属性｜アクセシビリティ対応

<th> に scope 属性を追加すると、スクリーンリーダーがヘッダーとデータの関係を正しく読み上げます。

<table>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
      <th scope="col">在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">商品A</th>
      <td>1,000円</td>
      <td>50個</td>
    </tr>
  </tbody>
</table>

scope値	意味
col	列のヘッダーであることを示す
row	行のヘッダーであることを示す

---

テーブルのCSSスタイリング

基本的なスタイル

table {
  width: 100%;
  border-collapse: collapse;   /* セルの境界線を重ねる */
  font-size: 14px;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #e0e0e0;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* ゼブラストライプ（縞模様） */
tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* ホバー時のハイライト */
tbody tr:hover {
  background-color: #f0f7ff;
}

border-collapse の違い

/* separate（デフォルト）: セル間に隙間がある */
table { border-collapse: separate; }

/* collapse: 境界線が重なりすっきり見える */
table { border-collapse: collapse; }

---

レスポンシブテーブル

テーブルはスマホで横幅が足りず崩れやすいです。横スクロールを有効にする方法が実用的です。

<!-- テーブルをdivで囲む -->
<div class="table-scroll">
  <table>
    ...
  </table>
</div>

.table-scroll {
  overflow-x: auto;   /* 横スクロールを有効化 */
  -webkit-overflow-scrolling: touch;
}

/* テーブルの最小幅を設定（スクロール発生の基準） */
table {
  min-width: 600px;
}

---

テーブルを使うべき場面・使わない場面

使うべき場面 ✓

• 比較表（料金・スペック・機能）
• データの一覧（売上・スコア・スケジュール）
• 構造化されたデータ（行と列の関係が明確なもの）

使ってはいけない場面 ✗

<!-- × レイアウト目的でtableを使うのは完全にNG（HTML4時代の手法） -->
<table>
  <tr>
    <td>左サイドバー</td>
    <td>メインコンテンツ</td>
  </tr>
</table>

レイアウトはFlexboxやGrid（CSS）で行うのが現代のHTML/CSSの原則です。

---

まとめ

タグ	役割
<table>	テーブル全体
<thead> / <tbody> / <tfoot>	行グループ（構造の明示）
<tr>	行
<th>	ヘッダーセル（scope属性でアクセシビリティ向上）
<td>	データセル
colspan / rowspan	セルの結合

テーブルはデータ表示に特化したタグです。レイアウト目的では使わず、比較表・データ一覧に正しく活用しましょう。