Tableコンポーネント（テーブルスタイル）

『Bootstrap』の Table は、標準の HTML テーブルにクラスを追加するだけでストライプ・ホバー・ボーダーなどのスタイルを手軽に適用できるコンポーネントです。レスポンシブ対応や色バリエーションも豊富に揃っており、データの一覧表示をすっきりと整えられます。

構文

<!-- 基本的な Table -->
<table class="table">
  <thead>
    <tr><th>名前</th><th>役職</th><th>部署</th></tr>
  </thead>
  <tbody>
    <tr><td>山田 太郎</td><td>エンジニア</td><td>開発部</td></tr>
    <tr><td>鈴木 花子</td><td>デザイナー</td><td>デザイン部</td></tr>
  </tbody>
</table>

<!-- ストライプ + ホバー + ボーダーを組み合わせた Table -->
<table class="table table-striped table-hover table-bordered">
  <thead class="table-dark">
    <tr><th>名前</th><th>役職</th><th>部署</th></tr>
  </thead>
  <tbody>
    <tr><td>山田 太郎</td><td>エンジニア</td><td>開発部</td></tr>
    <tr><td>鈴木 花子</td><td>デザイナー</td><td>デザイン部</td></tr>
  </tbody>
</table>

<!-- レスポンシブ対応: table-responsive で横スクロールを有効にします -->
<div class="table-responsive">
  <table class="table">
    <!-- 列数が多いテーブルでも小さい画面でスクロールして閲覧できます -->
  </table>
</div>

Table クラス一覧

クラス名	説明
`table`	Bootstrap のテーブルスタイルを有効にする基本クラスです。必ず付与が必要です。
`table-striped`	奇数行と偶数行を交互に色分けするゼブラストライプを適用します。
`table-striped-columns`	行ではなく列方向にストライプを適用します。
`table-hover`	マウスカーソルを乗せた行にハイライトを表示します。
`table-bordered`	全セルに罫線（ボーダー）を表示します。
`table-borderless`	すべての罫線を非表示にします。
`table-sm`	セルのパディングを小さくしてコンパクトな表示にします。
`table-dark`	テーブル全体またはヘッダーに暗い背景色を適用します。
`table-light`	テーブル全体またはヘッダーに明るい背景色を適用します。
`table-primary`	テーブル・行・セルにプライマリカラー（青）の背景を適用します。
`table-secondary`	テーブル・行・セルにセカンダリカラー（グレー）の背景を適用します。
`table-success`	テーブル・行・セルに成功を示す緑の背景を適用します。
`table-danger`	テーブル・行・セルに危険を示す赤の背景を適用します。
`table-warning`	テーブル・行・セルに警告を示す黄の背景を適用します。
`table-info`	テーブル・行・セルに情報を示す水色の背景を適用します。
`table-active`	テーブル・行・セルにアクティブ状態のハイライト色を適用します。
`table-responsive`	テーブルを `<div>` で囲んで横スクロールを有効にします。小さい画面でのはみ出しを防ぎます。
`table-responsive-{ブレークポイント}`	指定したブレークポイント未満の幅でのみ横スクロールを有効にします（例: `table-responsive-md`）。
`caption-top`	`<caption>` 要素をテーブルの上部に表示します（デフォルトは下部）。

サンプルコード

ストライプ・ホバー・ダークヘッダーを組み合わせた基本的なテーブルの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table サンプル</title>
  <!-- Bootstrap の CSS を読み込みます -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">

  <!-- caption-top: キャプションをテーブルの上に表示します -->
  <table class="table table-striped table-hover caption-top">
    <caption>社員一覧（2024年度）</caption>

    <!-- table-dark: ヘッダー行を暗い背景にします -->
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>名前</th>
        <th>役職</th>
        <th>部署</th>
      </tr>
    </thead>

    <tbody>
      <!-- table-striped により1行おきに背景色が変わります -->
      <tr>
        <td>1</td>
        <td>山田 太郎</td>
        <td>エンジニア</td>
        <td>開発部</td>
      </tr>
      <tr>
        <td>2</td>
        <td>鈴木 花子</td>
        <td>デザイナー</td>
        <td>デザイン部</td>
      </tr>
      <!-- table-success: 特定の行に色を付けて強調できます -->
      <tr class="table-success">
        <td>3</td>
        <td>佐藤 次郎</td>
        <td>マネージャー</td>
        <td>営業部</td>
      </tr>
      <tr>
        <td>4</td>
        <td>田中 美咲</td>
        <td>ライター</td>
        <td>広報部</td>
      </tr>
    </tbody>
  </table>

</div>

</body>
</html>

列数が多い場合にレスポンシブ対応で横スクロールを有効にする例です。

<div class="container mt-4">

  <!-- table-responsive: 小さい画面でテーブルが横にはみ出さないようにします -->
  <div class="table-responsive">
    <table class="table table-bordered table-sm">

      <thead class="table-light">
        <tr>
          <th>商品コード</th>
          <th>商品名</th>
          <th>カテゴリ</th>
          <th>在庫数</th>
          <th>単価（円）</th>
          <th>ステータス</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>A-001</td>
          <td>ノートPC</td>
          <td>電子機器</td>
          <td>12</td>
          <td>98,000</td>
          <!-- table-success をセル単位で使って在庫状況を色分けします -->
          <td class="table-success">在庫あり</td>
        </tr>
        <tr>
          <td>A-002</td>
          <td>ワイヤレスマウス</td>
          <td>周辺機器</td>
          <td>0</td>
          <td>3,500</td>
          <!-- table-danger をセル単位で使って在庫切れを赤で示します -->
          <td class="table-danger">在庫切れ</td>
        </tr>
        <tr>
          <td>A-003</td>
          <td>USB ハブ</td>
          <td>周辺機器</td>
          <td>3</td>
          <td>2,800</td>
          <!-- table-warning をセル単位で使って残りわずかを黄で示します -->
          <td class="table-warning">残りわずか</td>
        </tr>
      </tbody>

    </table>
  </div>

</div>

概要

『Bootstrap』の Table は、<table> に table クラスを付けるだけで整ったスタイルが適用されます。さらに table-striped でゼブラストライプ、table-hover でホバーハイライト、table-bordered で全セルへの罫線を追加でき、これらは自由に組み合わせることができます。

行やセル単位で table-success / table-danger / table-warning などのカラークラスを付けると、データの状態を色で直感的に伝えられます。table-dark や table-light を <thead> に使うとヘッダーだけ色を変えることも可能です。

列数が多くなる場合は <div class="table-responsive"> でテーブルを囲むと、小さい画面でも横スクロールでコンテンツを確認できます。table-responsive-md のようにブレークポイントを指定すると、それ未満の幅でのみスクロールが有効になります。

関連ページ: Container / グリッドシステム / Card

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

Bootstrap辞典

Tableコンポーネント（テーブルスタイル）

構文

Table クラス一覧

サンプルコード

概要