Bootstrapにおけるtableの使い方は？テーブル全体の背景色やヘッダ部のみの背景色を指定

システム
エンジニア

Bootstrapでのtableはどのようなことができるのですか。

プロジェクト
マネージャー

テーブル全体の背景色やヘッダ部のみの背景色を指定できます。

Bootstrapにおけるtableの使い方とは？

今回は、Bootstrapにおけるtableの使い方について説明します。

そして、テーブル全体の背景色やヘッダ部のみの背景色を指定する方法のほかに、ストライプテーブルやボーダーテーブル、ホバーテーブルについてもご紹介します。

 

Bootstrapにおけるtableの使い方に興味のある方はぜひご覧ください。

テーブルの基本

<table> に .table クラスを指定すると、Bootstrapのテーブルとなります。

 

 

See the Pen
bootstrap_table1 by kskumd (@kskumd)
on CodePen.

 

このように、<table> に .table クラスを指定すると、Bootstrapのテーブルとなります。

テーブル全体の背景色指定

Bootstrapでは、<table> に .table-* クラスを指定すると、テーブル全体の背景色を変更できます。

 

<table class=“table table-success”>
<caption>table-success</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Tanaka</td><td>30</td></tr>
</table>

<table class=“table table-danger”>
<caption>table-danger</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Tanaka</td><td>30</td></tr>
</table>

<table class=“table table-warning”>
<caption>table-warning</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Tanaka</td><td>30</td></tr>
</table>

<table class=“table table-info”>
<caption>table-info</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Tanaka</td><td>30</td></tr>
</table>

<table class=“table table-light”>
<caption>table-light</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Tanaka</td><td>30</td></tr>
</table>

<table class=“table table-dark”>
<caption>table-dark</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Tanaka</td><td>30</td></tr>
</table>

 

See the Pen
bootstrap_table2 by kskumd (@kskumd)
on CodePen.

 

このように、Bootstrapでは<table> に .table-* クラスを指定すると、テーブル全体の背景色を変更できます。

テーブルヘッダの背景色変更

Bootstrapでは、thead-* を指定すると、ヘッダの背景色を変更できます。

 

<table class=“table”>
<thead class=“thead-dark”>
<tr>
<th scope=“col”>#</th>
<th scope=“col”>Name</th>
<th scope=“col”>Age</th>
<th scope=“col”>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=“row”>1</th>
<td>Tanaka</td>
<td>30</td>
<td>male</td>
</tr>
</tbody>
</table>

 

See the Pen
bootstrap_table3 by kskumd (@kskumd)
on CodePen.

 

このように、Bootstrapではthead-* を指定すると、ヘッダの背景色を変更できます。

ストライプテーブル

Bootstrapでは、table-striped を指定すると、ストライプテーブルになります。

 

 

See the Pen
bootstrap_table4 by kskumd (@kskumd)
on CodePen.

ボーダーテーブル

Bootstrapでは、table-bordered を指定すると、ボーダー（枠線）付きのテーブルになります。
table-borderless を指定すると、ボーダーなしのテーブルになります。

 

 

See the Pen
bootstrap_table5 by kskumd (@kskumd)
on CodePen.

ホバーテーブル

Bootstrapでは、table-hover を指定すると、行にマウスオンした場合に背景色を変更します。

 

 

See the Pen
bootstrap_table6 by kskumd (@kskumd)
on CodePen.

システム
エンジニア

テーブルを使うと、さまざまなところの色の指定ができるのですね。

プロジェクト
マネージャー

そのとおりです。ぜひご自身でもコードを書いて理解を深めてください。

まとめ

いかがでしたでしょうか。Bootstrapにおけるtableの使い方について説明してきました。

 

テーブル全体の背景色や、ヘッダ部のみの背景色を指定する方法や、ストライプテーブルやボーダーテーブル、ホバーテーブルについても紹介しました。

 

ぜひご自身でソースコードを書いて、理解を深めてください。