Bootstrap4 テーブル(table)クラスの使い方を徹底解説

ここではBootstrap4系でのテーブル(table)クラスの使い方を説明していきます。

テーブルtableに関するBootstrapのクラス

BootStrapのテーブルスタイルを適用するには、table要素に対してclass=”table”という形式で指定します。table-xxxxxを追加してオプションをつけることができます。

それでは、tableの使い方についてそれぞれ個別に説明していきます。

基本のtableクラス

tableの基本形はtableにtableクラスをつけます。
<table class=”table”>….</table>

■表示例

■ソースコード　<table class=”table”>….</table>

<table class="table">
 <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr>
 <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr>
 <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr>
 <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr>
 <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr>
</table>

オプションクラス table-striped

tableクラスに加えてtable-stripedを指定すると、テーブルがストライプになります。
<table class=”table table-striped”>….</table>
■表示例

■ソースコード

<table class="table table-striped">
 <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr>
 <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr>
 <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr>
 <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr>
 <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr>
</table>

オプションクラス table-bordered

tableクラスに加えてtable-borderedを指定すると、テーブルとセルの全てのサイドに枠線がつきます(横枠線に加えてたて枠線がつきます)。
<table class=”table table-bordered”>….</table>

■表示例

■ソースコード

<table class="table table-bordered">
 <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr>
 <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr>
 <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr>
 <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr>
 <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr>
</table>

オプションクラス table-hover

tableクラスに加えてtable-hoverを指定すると、マウスオーバーした時に行がハイライトされます。
<table class=”table table-hover”>….</table>
■表示例

■ソースコード

<table class="table table-hover">
 <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr>
 <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr>
 <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr>
 <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr>
 <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr>
</table>

オプションクラス table-sm

tableクラスに加えてtable-smを指定すると、テーブルの行間が小さくなります。
<table class=”table table-sm”>….</table>
■表示例

■ソースコード

<table class="table table-sm">
 <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr>
 <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr>
 <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr>
 <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr>
 <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr>
</table>

(※)Bootstrap3系ではtable-condensedでしたが、bootstrap4系ではtable-smに変更されています。

オプションクラス table-responsive

テーブルに横スクロールをつけてレスポンシブテーブルとする場合は、tableタグをtable-responsiveで囲みます。
■表示例

■ソースコード　class=”table-responsive”

<div class="table-responsive">
  <table class="table text-nowrap">
    <tr>
      <th>コース名</th>
      <th>コース詳細</th>
    </tr>
    <tr><td>ライトコース</td><td>26時間のライトコースです。26時間のライトコースです。</td></tr>
    <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr>
    <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr>
    <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr>
    <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr>
  </table>
</div>

(※)なお、テーブル内の文章を折り返したくないカラムにtext-nowrapクラスをつけます。(ここではtable要素にtext-nowrapをつけた例(テーブル内の文章を折り返さずに表示)です)

(参考)text-nowrapクラス

特定のセルにtext-nowrapをつけるとその行の折り返しがなくなります。
■表示例　(ここでは、「26時間のライトコースです。26時間のライトコースです。」の部分)にtext-nowrapをつけています)

<div class="table-responsive">
  <table class="table">
    <tr>
      <th>コース名</th>
      <th>コース詳細</th>
    </tr>
    <tr><td>ライトコース</td><td class="text-nowrap">26時間のライトコースです。26時間のライトコースです。</td></tr>
    <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr>
    <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr>
    <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr>
    <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr>
  </table>
</div>

オプションクラス table-responsive-{プレフィックス}

ブレークポイントを設けつつ、テーブルに横スクロールをつけてレスポンシブテーブルとする場合は、tableタグをtable-responsive-{-sm|-md|-lg|-xl}で囲みます。
■表示例　table-responsive-md(767px以下でレスポンシブ)

■ソースコード　class=”table-responsive-md”

<div class="table-responsive-md">
  <table class="table text-nowrap">
    <tr>
      <th>コース名</th>
      <th>コース詳細</th>
    </tr>
    <tr><td>ライトコース</td><td>26時間のライトコースです。26時間のライトコースです。</td></tr>
    <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr>
    <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr>
    <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr>
    <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr>
  </table>
</div>

オプションクラス table-dark

tableクラスに加えてtable-darkを指定すると、テーブルが黒色になります。
<table class=”table table-dark”>….</table>

■表示例

■ソースコード

<table class="table table-dark">
 <tr><td>ライトコース</td><td>26時間のライトコースです</td></tr>
 <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです</td></tr>
 <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです</td></tr>
 <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです</td></tr>
 <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです</td></tr>
</table>

オプションクラス thead-dark、thead-light

thead要素にthead-dark、thead-lightを指定すると、それぞれヘッダーすると、thead行がそれぞれ黒色・薄い灰色になります。
<table class=”table table-dark(thead-light)”>….</table>
■表示例 thead-darkを指定した例

■ソースコード

<table class="table">
    <thead class="thead-dark">
      <tr>
        <th>コース名</th>
        <th>コース詳細</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>ライトコース</td><td class="text-nowrap">26時間のライトコースです。26時間のライトコースです。</td></tr>
      <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr>
      <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr>
      <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr>
      <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr>
    </tbody>
  </table>

■表示例 thead-lightを指定した例

■ソースコード

<table class="table">
    <thead class="thead-light">
      <tr>
        <th>コース名</th>
        <th>コース詳細</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>ライトコース</td><td class="text-nowrap">26時間のライトコースです。26時間のライトコースです。</td></tr>
      <tr><td>スタンダードコース</td><td>48時間のスタンダードコースです。48時間のスタンダードコースです。</td></tr>
      <tr><td>プロフェッショナルコース</td><td>80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです</td></tr>
      <tr><td>マンツーマンレッスン</td><td>単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです</td></tr>
      <tr><td>出張研修・コンサルティング</td><td>お客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです</td></tr>
    </tbody>
  </table>

オプションクラス Contextual classes

テーブルの各行や各セルに対してtable-{color}を設定することで色を設定することができます。
■表示例(各行trにtable-{color}を設定した例。tdやthでも可)

■ソースコード

<table class="table">
  <tr class="table-active"><td>table-active</td></tr>
  <tr class="table-primary"><td>table-primary</td></tr>
  <tr class="table-secondary"><td>table-secondary</td></tr>
  <tr class="table-success"><td>table-success</td></tr>
  <tr class="table-danger"><td>table-danger</td></tr>
  <tr class="table-warning"><td>table-warning</td></tr>
  <tr class="table-info"><td>table-info</td></tr>
  <tr class="table-light"><td>table-light</td></tr>
  <tr class="table-dark"><td>table-dark</td></tr>
</table>

テーブルの各行や各セルに対してbg-{color}を設定することで、鮮やかな色を設定することもできます。
■表示例(各行trにbg-{color}を設定した例。tdやthでも可)

■ソースコード

<table class="table">
  <tr class="bg-primary"><td>table-active</td></tr>
  <tr class="bg-success"><td>table-success</td></tr>
  <tr class="bg-danger"><td>table-danger</td></tr>
  <tr class="bg-warning"><td>table-warning</td></tr>
  <tr class="bg-info"><td>table-info</td></tr>
</table>

Bootstrap4とBootstrap3のtableに関する主な違い

Bootstrap4とBootstrap3のtableに関する主な違いをまとめました。

詳細は下記を参照ください。
Tables | Bootstrap 4.3

Tables | Bootstrap 3.3

まとめ

いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の4系のtableクラスの使い方の基本をご紹介しました。

公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
Tables | Bootstrap 4.3

今回は、以上になります。最後までご覧いただきありがとうございました。