【6日でできるHTML＆CSS入門】Bootstrapのテーブル

　データの一覧や比較、商品リストなど、テーブル（表組み）はWebサイトに欠かせません。Bootstrapを使えば、テーブルのデザインや機能をクラスを追加するだけで簡単に強化できます。ここでは、Bootstrapのテーブル機能の基本と活用方法を、実際のサンプルコードとともに解説します。

１．Bootstrapでテーブルを作る

1.1. すぐに使えるテーブルのサンプル

インターネット接続が必要です。CDN経由でBootstrapのCSS/JSを読み込みます。

「社員一覧」として、氏名・部署・メールアドレスを表示します。

ファイル名： lesson55_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap テーブルサンプル（社員一覧）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h1 class="mb-4">社員一覧</h1>
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th scope="col">社員番号</th>
          <th scope="col">氏名</th>
          <th scope="col">部署</th>
          <th scope="col">メールアドレス</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1001</th>
          <td>佐藤 太郎</td>
          <td>営業部</td>
          <td>taro.sato@example.co.jp</td>
        </tr>
        <tr>
          <th scope="row">1002</th>
          <td>鈴木 花子</td>
          <td>総務部</td>
          <td>hanako.suzuki@example.co.jp</td>
        </tr>
        <tr>
          <th scope="row">1003</th>
          <td>高橋 一郎</td>
          <td>開発部</td>
          <td>ichiro.takahashi@example.co.jp</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

1.2. このサンプルの特徴

タイトルは「社員一覧」
テーブルは「社員番号」「氏名」「部署」「メールアドレス」の4列
1行ごとに背景色が交互、マウスオーバーでハイライト
境界線あり
どのデバイスでも見やすいレイアウト

２．Bootstrapテーブルの主要クラスとタグ

クラス・タグ	説明
table	Bootstrap標準のテーブルレイアウトを適用
table-striped	1行ごとに背景色を交互に表示
table-bordered	セル全体に枠線を表示
table-hover	マウスポインタを載せた行をハイライト
table-responsive	テーブルを横スクロール可能なレスポンシブ対応に
<thead>…</thead>	表のヘッダー行をグループ化（見出し部分）
<tbody>…</tbody>	表の本体データ行をグループ化
<tfoot>…</tfoot>	表のフッター行をグループ化（省略可）
<th scope="row">	行の先頭セル用（行見出し）
<th scope="col">	列の先頭セル用（列見出し）

３．よく使うテーブルのバリエーション

クラス	効果・用途
table-sm	行の高さを狭くし、コンパクトなテーブルに
table-dark	テーブル全体を暗い配色に
table-primary	テーブル全体を強調色（青系など）に
table-success	テーブル全体を成功色（緑系）に
table-danger	テーブル全体を警告色（赤系）に
table-responsive	スクロール領域付きのレスポンシブテーブル

４．Bootstrapテーブルの実用ポイント

クラスを増やすだけで簡単に装飾を切り替えられます。
大きなデータを表示する際はtable-responsiveを親のdivに指定しましょう。
<thead>, <tbody>, <tfoot>で見出し・本体・フッターを分けて管理できます。

まとめ

Bootstrapテーブルはクラスを指定するだけで美しく・見やすい表組みが完成します。
テーブルのデザイン・行ハイライト・枠線・レスポンシブ対応など、用途に合わせて自在にアレンジ可能です。
サンプルはそのままコピー＆ペーストですぐ動きますので、各クラスを試しながら理解を深めましょう。