基本要素

【Bootstrapの基本要素】テーブル(Tables)について

記事内に商品プロモーションを含む場合があります

ここでは、Bootstrapのテーブル(Tables)について解説していきます。

よく使用されるテーブルのクラスはこちらの3つです。

・table-striped
・table-hover 
・table-sm

アルファベット表記から予想がつくかもしれませんが、それぞれストライプ、オンマウス、サイズ小さめ、の意味があります。
では、詳細を見ていきましょう。

テーブルにストライプを入れる

早速コードを見ていきます。

ストライプのテーブル

  1. <div class=“container”>
  2.       <table class=“table table-striped”>
  3.         <thead>
  4.           <tr>
  5.             <th scope=“col”>#</th>
  6.             <th scope=“col”>名前</th>
  7.             <th scope=“col”>年齢</th>
  8.             <th scope=“col”>居住地</th>
  9.           </tr>
  10.         </thead>
  11.         <tbody>
  12.           <tr>
  13.             <th scope=“row”>1</th>
  14.             <td>山田</td>
  15.             <td>20歳</td>
  16.             <td>東京</td>
  17.           </tr>
  18.           <tr>
  19.             <th scope=“row”>2</th>
  20.             <td>山本</td>
  21.             <td>25歳</td>
  22.             <td>神奈川</td>
  23.           </tr>
  24.           <tr>
  25.             <th scope=“row”>3</th>
  26.             <td>鈴木</td>
  27.             <td>30歳</td>
  28.             <td>埼玉</td>
  29.           </tr>
  30.         </tbody>
  31.       </table>
  32.     </div>

 

table-stripedクラスを追加

各行が交互に色が変わっているのが確認できます。

ホバーしたときに色を変える

次のコードも見ていきましょう。

ホバー時の色を変える

  1. <div class=“container”>
  2.       <table class=“table table-hover”>
  3.         <thead>
  4.           <tr>
  5.             <th scope=“col”>#</th>
  6.             <th scope=“col”>名前</th>
  7.             <th scope=“col”>年齢</th>
  8.             <th scope=“col”>居住地</th>
  9.           </tr>
  10.         </thead>
  11.         <tbody>
  12.           <tr>
  13.             <th scope=“row”>1</th>
  14.             <td>山田</td>
  15.             <td>20歳</td>
  16.             <td>東京</td>
  17.           </tr>
  18.           <tr>
  19.             <th scope=“row”>2</th>
  20.             <td>山本</td>
  21.             <td>25歳</td>
  22.             <td>神奈川</td>
  23.           </tr>
  24.           <tr>
  25.             <th scope=“row”>3</th>
  26.             <td>鈴木</td>
  27.             <td>30歳</td>
  28.             <td>埼玉</td>
  29.           </tr>
  30.         </tbody>
  31.       </table>
  32.     </div>

 

table-hoverクラスを追加

ちょっと分かりづらいかもしれませんが、ストライプは消えて、ホバーしたときに色が変わっています。
(※1行目にマウスを持ってきています)

サイズを小さめにする

最後にtable-smを追加してみます。

ホバー時の色を変える・サイズを小さくする

  1. <div class=“container”>
  2.       <table class=“table table-hover table-sm”>
  3.         <thead>
  4.           <tr>
  5.             <th scope=“col”>#</th>
  6.             <th scope=“col”>名前</th>
  7.             <th scope=“col”>年齢</th>
  8.             <th scope=“col”>居住地</th>
  9.           </tr>
  10.         </thead>
  11.         <tbody>
  12.           <tr>
  13.             <th scope=“row”>1</th>
  14.             <td>山田</td>
  15.             <td>20歳</td>
  16.             <td>東京</td>
  17.           </tr>
  18.           <tr>
  19.             <th scope=“row”>2</th>
  20.             <td>山本</td>
  21.             <td>25歳</td>
  22.             <td>神奈川</td>
  23.           </tr>
  24.           <tr>
  25.             <th scope=“row”>3</th>
  26.             <td>鈴木</td>
  27.             <td>30歳</td>
  28.             <td>埼玉</td>
  29.           </tr>
  30.         </tbody>
  31.       </table>
  32.     </div>

 

table-hover・table-smクラスを追加

サイズが小さくなっているのが確認できます。またホバークラスを残しているので、マウスを持ってきているところは色が変わっています。
(※2行目にマウスを持ってきています。)

まとめ

Bootstrapのテーブル(Tables)について解説しました。

まとめると、以下の3つのクラスです。

・table-striped
・table-hover 
・table-sm

繰り返しますが、それぞれストライプ、ホバー時の色変更、サイズを小さくする、というクラスでした。

なお、他にもテーブルのクラスはありますが、より詳しく知りたい方は、こちらのBootstrapのテーブルの公式ドキュメントをご参照ください。

ABOUT ME
ゆう
エンジニア歴7年。 大学卒業後、フィールドエンジニア職に就くが「手に職をつけたい」と思い、未経験からWEBデザイナーに転職。 その後、「WEB制作会社」「上場企業のECサイト運用」を経て、現在は「自社開発企業」のフロントエンドエンジニアとして仕事をしています。