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

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

技術メモ, Bootstrap4

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

今回は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
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル

 

 

 

 

ホームページ制作ならRU DESIGN
「スタードメイン」は、年額100円からの独自ドメイン+無料サーバーも付いてきます。
WordPressも使えるので、練習も兼ねてお手軽にサイト運営ができちゃいます。


ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。

関連記事

Crayon Syntax Highlighterの代替プラグイン「Enlighter」
2023/06/05
 ソースコードをきれいに表示させるのに役立っていた「Crayon Syntax Highlighter」ですが、更新も止まったままの状態で再開の目処はなさそうで...
WordPressの文字列を一括変換する便利なプラグイン「Search Regex」
2023/05/26
 WordPressのサイト内の文字列を一括置換・一括変換するのに便利なプラグインをご紹介します。ドメインを変更した場合だったり、「WordPress」を「ワー...
ワードプレスの記事をまとめて削除に便利!「Bulk Delete」
2023/04/25
 ワードプレスで大量の記事を削除したいときに便利なのが「Bulk Delete」というプラグインです。数十記事ではチェックボックスで一括選択削除で十分ですが、こ...
Twitterに過去記事を自動投稿するプラグイン「Revive Old Posts」
2023/04/18
 TwitterなどSNSへの自動投稿プラグイン「Revive Old Posts」をご紹介します。記事投稿時に自動でツイートしてくる「WP to Twitte...
Mac カスタムサイズの用紙印刷ができない場合の対処法
2023/04/12
 Macで通常のプリセットされている用紙サイズでは印刷できるのに、カスタムサイズでは印刷できない(プリンタは動いているのに白紙のまま)場合の対処をいくつかご紹介...