Bootstrapで文字や表などをカッコよく表示しよう

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第3回

テーブル（表）

　業務系のWebアプリでは、データベースなどから検索した値の一覧を表示することが多くあります。その際、細かい字や数字などが多くなると、どうしてもユーザからは見づらくなってしまいます。ここでは、Bootstrapのテーブル（表）を利用する方法について説明します。

スタイル

　Bootstrapで表を表示するには、class属性に"table"を指定します。枠線のないスタイリッシュな表が作成できます。

表の例

　表では、次のスタイルを指定できます。

表のスタイル

class属性の指定	説明
table-striped	1行ごとに色を表示
table-bordered	表の外枠を表示
table-hover	マウスをあてると、行の背景色を変更
table-condensed	行の高さを狭く表示

リスト6　テーブルのスタイル指定 （table1.htmlの抜粋）

<table class="table table-striped table-bordered table-hover table-condensed">
～中略～
</table>

表のスタイル例

背景色

　行の背景色を変更するには、tr要素またはtd要素の中に次のclass属性を指定します。

表の背景色の指定

用途	class属性の指定
アクティブ	active
成功	success
注意	warning
警告	danger
情報	info

リスト7　テーブルの背景色 （table2.htmlの抜粋）

<table class="table table-bordered">
～中略～
    <tbody>
        <tr>
            <td class="active">はじめてのC#</td>
            <td class="success">2000円</td>
        </tr>
        <tr class="warning">
            <td>クラウド全集</td>
            <td>5000円</td>
        </tr>
        <tr>
            <td>楽しいRuby</td>
            <td class="info">3000円</td>
        </tr>
    </tbody>
</table>

表の背景色指定例