【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>

 

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

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

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

ホバー時の色を変える

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>

 

ちょっと分かりづらいかもしれませんが、ストライプは消えて、ホバーしたときに色が変わっています。
（※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>

 

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

まとめ

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

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

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

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

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