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-* クラスを指定すると、テーブル全体の背景色を変更できます。

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

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

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

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

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

Bootstrapにおけるtableの使い方についてよく理解できました。

PM

テーブル全体の背景色や、ヘッダ部のみの背景色を指定する方法などが理解できたら、実際にソースコードで指定してみましょう。

まとめ

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

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

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