1. TOP
  2. 技術メモ
  3. 【初心者の方向け】 Bootstrap4の使い方 テーブル

【初心者の方向け】 Bootstrap4の使い方 テーブル

技術メモ, Bootstrap4

2019/03/22
2022/07/21
【初心者の方向け】 Bootstrap4の使い方 テーブル

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

今回はBootstrapのテーブルの使い方を覚えてみましょう。

 

Bootstrap4のバージョン4.3をベースに書いています。

 

基本的なテーブル

<table>要素にtableクラスを使用します。

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table">
  <thead>
    <tr>
    <th scope="col">#</th>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">1</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

テーブルの背景に色をつける

<table>にtable-○○を追記することによりテーブルに背景色を指定する事ができます。

<thead>にはthead-○○で色を指定します。下のテーブルにはにtable-lightをにthread-darkにしています。

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-light">
  <thead class="thead-dark">
    <tr>
    <th scope="col">#</th>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">1</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

交互に色変える

交互に色を変えるには<table>要素にtable-stripedを追加します。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3
3 内容1 内容2 内容3

コード

<table class="table table-striped">
  <thead>
    <tr>
    <th scope="col">#</th>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">1</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">3</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <th scope="row">4</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

テーブル全体に罫線を付ける

<table>要素にtable-borderedでテーブルとセルのすべての辺の境界線を追加します。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-bordered">
  <thead>
    <tr>
    <th scope="col">#</th>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">1</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

上記とは逆に<table>要素にtable-borderlessで境界線無しになります。

これは背景色が暗くても使用可能です。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-dark table-borderless">
  <thead>
    <tr>
    <th scope="col">#</th>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">1</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

行をマウスオーバー時にホバーで見やすく

<table>要素にtable-hoverを追加するとホバーが有効になります。

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-hover">
  <thead>
    <tr>
    <th scope="col">#</th>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">1</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

テーブルを小さくコンパクトに

<table>要素にtable-smを追加することで、セル内に設定されているpaddingを半分にし

コンパクトに表示させます。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-sm">
  <thead>
    <tr>
    <th scope="col">#</th>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th scope="row">1</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

背景色について

背景色については先ほど書きましたがbg-○○のクラスでも指定することができます。

table-○○で指定した場合とbg-○○で指定した場合の違いは下記のようになります。

テキストの色など何も追記していない状態なので比べて見て下さい。

 

背景色のクラスを各行に指定
table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark

 

レスポンシブでのテーブル表示

 

<table>要素にtable-responsiveのクラスで囲うことにより、ブレークポイントに応じて水平にスクロールされるテーブルを表示させることができます。

 

<div class="table-responsive-ブレークポントを指定">
  <table class="table">
    ...
  </table>
</div>

 

 

各ブレークポイントの指定は下記のようになります。

table-responsive-sm

table-responsive-md

table-responsive-lg

table-responsive-xl

 

 

 

table-responsive-sm
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル
table-responsive-md
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル
table-responsive-lg
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル
table-responsive-xl
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル

 

table-responsiveで全てのブレークポイントをまたいで

テーブルを水平にスクロールすることができます。

table-responsive
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル

 

 

 

 

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。


応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B

ホームページ制作ならRU DESIGN

関連記事

Bootstrap 5 アラート(Alert)の作成について
2025/02/12
Bootstrap 5のアラートコンポーネントは、ユーザーに通知やメッセージを表示するためのスタイル化されたボックスです。アラートは、情報、成功、警告、エラーな...
Bootstrap5 フォームの作成について
2025/02/12
Bootstrap 5のフォームコンポーネントは、ユーザー入力を受け取るためのさまざまな要素を提供します。テキストボックス、チェックボックス、ラジオボタン、ドロ...
Bootstrap5 ボタン(Button)の作成と使い方
2025/02/12
Bootstrap 5のボタンコンポーネントは、ウェブサイトやアプリケーションでユーザーがアクションを実行するための重要な要素です。ボタンはさまざまなスタイル、...
Bootstrap5 モーダル(Modal)の作成。
2025/02/12
Bootstrap 5のモーダルコンポーネントは、ポップアップウィンドウを表示し、ユーザーに特定の情報を提供したり、入力を求めたりするための柔軟なツールです。モ...
Bootstrap5 カード(Card)の作成と簡単な使い方
2025/02/12
カードは、コンテンツを見栄え良く表示するためのフレームワークです。画像、タイトル、テキスト、リンクなどを含む柔軟なコンテンツボックスを作成することができます &...