.net column
.NET開発者のためのブログメディア

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

2021年03月09日
SE
Bootstrapでのtableはどのようなことができるのですか。
PM
テーブル全体の背景色やヘッダ部のみの背景色を指定できます。

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.

SE
テーブルを使うと、さまざまなところの色の指定ができるのですね。
PM
そのとおりです。ぜひご自身でもコードを書いて理解を深めてください。

まとめ

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

 

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

 

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs