English 中文 العربية 日本語 Português

Bootstrap: テーブル

最終更新：2026-08-26

1. はじめに

(1) 前提条件

(2) 🎯 学習内容

(3) 痛みポイント

Aliceがユーザー管理ページを作成しました。これはユーザーID、名前、メール、登録日、アクションボタンを表示する必要があります。データを table で表示することは、カードやリストを使用するよりも直感的です。

(4) 解決策

テーブルはデータ表示の主要な方法です。Bootstrapのテーブルクラスは、<table> に .table を追加するだけで、クリーンでプロフェッショナルなテーブルスタイルが得られます。

理解の仕方: Bootstrapテーブル = 基本の <table> のアップグレード版 — .table を追加して余白とタイポグラフィを適用し、.table-striped を追加して交互に行に色を付け、.table-hover を追加して行にホバーエフェクトを加えます。

(5) メリット

Bootstrapのテーブルユーティリティクラスを使えば、整ったプロフェッショナルなデータテーブルを素早く作成でき、データが一目で明確になります。

2. 基本テーブル

▶ サンプル 基本テーブル

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Basic Table</h5>
    <table class="table">
      <thead>
        <tr><th>#</th><th>Name</th><th>Email</th><th>Status</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Active</td></tr>
        <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>Active</td></tr>
        <tr><td>3</td><td>Charlie</td><td>charlie@example.com</td><td>Inactive</td></tr>
      </tbody>
    </table>

    <h5>Striped Rows</h5>
    <table class="table table-striped">
      <thead>
        <tr><th>#</th><th>Product</th><th>Price</th><th>Stock</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Laptop</td><td>$1,200</td><td>15</td></tr>
        <tr><td>2</td><td>Monitor</td><td>$350</td><td>42</td></tr>
        <tr><td>3</td><td>Keyboard</td><td>$80</td><td>108</td></tr>
      </tbody>
    </table>

    <h5>Hover + Bordered</h5>
    <table class="table table-bordered table-hover">
      <thead class="table-dark">
        <tr><th>#</th><th>City</th><th>Country</th><th>Population</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Tokyo</td><td>Japan</td><td>37M</td></tr>
        <tr><td>2</td><td>New York</td><td>USA</td><td>8.5M</td></tr>
        <tr><td>3</td><td>London</td><td>UK</td><td>9M</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

3. テーブルのバリエーション

クラス 効果 シナリオ
table 基本スタイリング（タイポグラフィ、余白、水平線） ミニマルなテーブル
table-striped 交互に薄い灰色の背景行 データ/レポート
table-bordered すべてのセルにボーダー 明確な区別が必要な場合
table-borderless ボーダーなし ミニマルなデザイン
table-hover 行ホバー時に背景色が暗くなる インタラクティブなテーブル
table-sm コンパクト版（パディング半分） データが密集したテーブル

4. 行/列の色

HTML 
<table class="table">
  <thead>
    <tr><th>Task</th><th>Status</th><th>Due</th></tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Design review</td><td>Completed</td><td>Jun 10</td>
    </tr>
    <tr class="table-warning">
      <td>Frontend implementation</td><td>In Progress</td><td>Jun 20</td>
    </tr>
    <tr class="table-danger">
      <td>Database migration</td><td>Overdue</td><td>Jun 5</td>
    </tr>
  </tbody>
</table>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

クラス 意味 使用するタイミング
table-primary 青 情報行
table-success 緑 成功/完了
table-danger 赤 エラー/期限超過
table-warning 黄 警告/進行中
table-info シアン ヒント/情報
table-active 灰色 �択/ハイライト

5. ヘッダーの色

HTML 
<table class="table">
  <thead class="table-dark">
    <tr><th>Dark Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

<table class="table">
  <thead class="table-light">
    <tr><th>Light Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

6. レスポンシブテーブル

HTML 
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr><th>#</th><th>Name</th><th>Email</th><th>Phone</th><th>Address</th><th>City</th><th>Country</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>+1-555-0100</td><td>123 Main St</td><td>New York</td><td>USA</td><td>Active</td></tr>
    </tbody>
  </table>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。 ブレークポイントを指定することもできます：table-responsive-sm / table-responsive-md / table-responsive-lg。

7. その他のテーブル例

▶ サンプル 包括的なデータテーブル

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <table class="table table-striped table-bordered table-hover">
      <thead class="table-dark">
        <tr>
          <th>Order ID</th>
          <th>Customer</th>
          <th>Product</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#1024</td>
          <td>Alice Chen</td>
          <td>Wireless Mouse</td>
          <td>$29.99</td>
          <td><span class="badge bg-success">Shipped</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1025</td>
          <td>Bob Wang</td>
          <td>Mechanical Keyboard</td>
          <td>$89.99</td>
          <td><span class="badge bg-warning">Processing</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr class="table-danger">
          <td>#1026</td>
          <td>Charlie Li</td>
          <td>USB-C Hub</td>
          <td>$45.00</td>
          <td><span class="badge bg-danger">Cancelled</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1027</td>
          <td>Diana Zhang</td>
          <td>Monitor Stand</td>
          <td>$34.99</td>
          <td><span class="badge bg-success">Delivered</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル ストライプとホバーのテーブル

HTML 
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Player</th>
      <th>Score</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>PlayerOne</td>
      <td>9,850</td>
      <td>Expert</td>
    </tr>
    <tr>
      <td>2</td>
      <td>SpeedRunner</td>
      <td>8,720</td>
      <td>Advanced</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Newbie99</td>
      <td>4,310</td>
      <td>Intermediate</td>
    </tr>
    <tr>
      <td>4</td>
      <td>GameMaster</td>
      <td>2,105</td>
      <td>Beginner</td>
    </tr>
  </tbody>
</table>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル バッジとボタンのあるテーブル

HTML 
<table class="table table-sm">
  <thead class="table-light">
    <tr>
      <th>Task</th>
      <th>Priority</th>
      <th>Assignee</th>
      <th>Due Date</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Design homepage</td>
      <td><span class="badge bg-danger">High</span></td>
      <td>Alice</td>
      <td>2026-07-10</td>
      <td><button class="btn btn-success btn-sm">Complete</button></td>
    </tr>
    <tr>
      <td>Write API docs</td>
      <td><span class="badge bg-warning">Medium</span></td>
      <td>Bob</td>
      <td>2026-07-15</td>
      <td><button class="btn btn-outline-primary btn-sm">Edit</button></td>
    </tr>
    <tr>
      <td>Fix login bug</td>
      <td><span class="badge bg-danger">Critical</span></td>
      <td>Charlie</td>
      <td>2026-07-08</td>
      <td><button class="btn btn-danger btn-sm">Fix Now</button></td>
    </tr>
    <tr>
      <td>Update dependencies</td>
      <td><span class="badge bg-success">Low</span></td>
      <td>Diana</td>
      <td>2026-07-20</td>
      <td><button class="btn btn-outline-secondary btn-sm">Skip</button></td>
    </tr>
  </tbody>
</table>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル レスポンシブテーブルのデモ

HTML 
<div class="table-responsive">
  <table class="table table-bordered">
    <thead class="table-primary">
      <tr>
        <th>#</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Department</th>
        <th>Role</th>
        <th>Status</th>
        <th>Joined</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice Chen</td>
        <td>alice@company.com</td>
        <td>+1-555-0101</td>
        <td>Engineering</td>
        <td>Senior Developer</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-03-15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob Wang</td>
        <td>bob@company.com</td>
        <td>+1-555-0102</td>
        <td>Design</td>
        <td>UI/UX Lead</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-06-01</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Charlie Li</td>
        <td>charlie@company.com</td>
        <td>+1-555-0103</td>
        <td>Marketing</td>
        <td>Content Manager</td>
        <td><span class="badge bg-warning">On Leave</span></td>
        <td>2023-11-20</td>
      </tr>
    </tbody>
  </table>
</div>
▶ 試してみよう

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) テーブルスタイリングオプションのフローチャート

100% 
flowchart LR
    A[table] --> B[基本スタイリング]
    A --> C[table-striped 交互色]
    A --> D[table-hover ホバーハイライト]
    A --> E[table-bordered 全ボーダー]
    A --> F[table-borderless ボーダーなし]
    A --> G[table-sm コンパクト]
    A --> H[table-responsive 水平スクロール]
    H --> I[table-responsive-sm]
    H --> J[table-responsive-md]
    H --> K[table-responsive-lg]

出力: Bootstrap 5.3 のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapのデフォルトテーマ（ライト）とレスポンシブグリッドを使用しています。

テーブルクラス 効果 典型的なシナリオ
table 基本の水平線 + タイポグラフィ ミニマルなデータテーブル
table-striped 奇数行を薄い灰色に リスト/レポート
table-bordered すべてのセルにボーダー 財務/統計テーブル
table-borderless 完全にボーダーなし カードスタイルの情報
table-hover ホバー行をハイライト インタラクティブなリスト
table-sm パディング半分 データが密集したシナリオ
行の色 セマンティクス データの意味
table-primary 青 情報/選択された行
table-success 緑 成功/完了
table-danger 赤 失敗/期限超過
table-warning 黄 警告/進行中
table-info シアン ヒント/新しいデータ
table-active 灰色 現在ハイライトされた行
レスポンシブバリエーション スクロールトリガーブレークポイント シナリオ
table-responsive 常にスクロール 多列データテーブル
table-responsive-sm <576px モバイル対応
table-responsive-md <768px タブレット対応
table-responsive-lg <992px 小さなデスクトップ画面
table-responsive-xl <1200px 大画面対応

❓ よくある質問

Q テーブル内のボタンやバッジは正しくスタイルされますか？
A 全く問題ありません。すべてのBootstrapコンポーネントはテーブル内で通常のスタイルを維持します。<td> 内にボタン、バッジ、トグルなどを配置できます。
Q テーブルでソート/検索/ページネーションはできますか？
A Bootstrapの table はスタイリングのみを処理します。ソート/検索/ページネーションはJavaScriptライブラリ（DataTablesなど）と組み合わせて実装する必要があります。
Q table-striped と table-hover を一緒に使用すると行の色が競合しますか？
A いいえ。色の階層：行の色 > ホバー > ストライプ。色付きの行はホバー時に少し暗くなります。
Q レスポンシブテーブルのスクロールバーは必要時のみ表示されますか？
A はい。table-responsive は overflow-x: auto を設定します。水平スクロールバーはテーブルの幅がコンテナの幅を超えた場合にのみ表示され、コンテンツが少ない場合は自動的に非表示になります。
Q table-striped はカスタム行の色（table-success など）と併用できますか？
A はい。カスタム行の色はストライピングよりも優先度が高く、table-success が適用された行はストライピングによって上書きされません。色付きの行も交互色に参加させる必要がある場合は、カスタムCSSのみを使用することをお勧めします。

📖 まとめ

📝 練習問題

  1. ⭐ 製品在庫テーブルを作成します：列にはID、名前、カテゴリ、価格、在庫数量、ステータスを含めます。テーブルには table-striped + table-hover を適用します。
  2. ⭐⭐ 練習問題1のテーブルを table-responsive でラップし、モバイルで水平スクロールして表示します。
  3. ⭐⭐⭐ ユーザー管理テーブルを作成します：ユーザーデータの3行を作成します。各行の最後の列には「編集」と「削除」ボタンを含めます。ヘッダーには table-dark を使用します。

前のレッスン: リストグループとバッジ · 次のレッスン: フォーム

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%