【初心者の方向け】 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で全てのブレークポイントをまたいで

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