Bootstrapテーブル入門：.table /.table-striped /.table-hover /.table-bordered をやさしく解説

テーブル入門：.table/.table-striped/.table-hover/.table-bordered の基本

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapって聞いたことはあるんですが、テーブルって何が便利なんですか？」

先生

「Bootstrapのテーブルを使うと、表が一瞬で見やすく整います。」

生徒

「難しい設定とか必要ですか？」

先生

「ほとんどクラス名を付けるだけなので、パソコン初心者でも安心ですよ。」

1. Bootstrapのテーブルとは何か

Bootstrapのテーブルとは、HTMLで作った表を見やすく整えてくれる仕組みです。表とは、学校の名簿や家計簿のように、行と列で情報を整理する形のことです。Bootstrapを使わない場合、文字が詰まって読みにくくなりがちですが、Bootstrapのテーブルクラスを使うと、余白や線が自動で調整され、読みやすい表になります。

プログラミング未経験の方は、難しく考えなくて大丈夫です。表に「目印のシール」を貼る感覚で、クラス名を付けるだけでデザインが変わります。

2. .table クラスの基本的な役割

.table は、Bootstrapテーブルの基本となるクラスです。これを付けるだけで、文字と文字の間に余白ができ、行ごとに区切りが入り、表としてとても読みやすくなります。例えるなら、ノートに定規で線を引いて整理するイメージです。


<table class="table">
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>田中</td>
            <td>20</td>
        </tr>
        <tr>
            <td>佐藤</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

ブラウザ表示

3. .table-striped で行をしましまにする

.table-striped は、表の行を交互に色分けするクラスです。これにより、どの行を見ているのかが分かりやすくなります。横断歩道の白い線のように、視線を助けてくれる役割があります。特に行数が多い表では、とても便利です。


<table class="table table-striped">
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
        <tr>
            <td>みかん</td>
            <td>120円</td>
        </tr>
    </tbody>
</table>

ブラウザ表示

4. .table-hover でマウス操作を分かりやすく

.table-hover は、マウスを行の上に乗せたときに背景色が変わる仕組みです。これは、今どこを指しているのかを教えてくれる目印のようなものです。パソコン操作に慣れていない人でも、選択している行が一目で分かります。


<table class="table table-hover">
    <thead>
        <tr>
            <th>曜日</th>
            <th>予定</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>月</td>
            <td>買い物</td>
        </tr>
        <tr>
            <td>火</td>
            <td>掃除</td>
        </tr>
    </tbody>
</table>

ブラウザ表示

5. .table-bordered で枠線をはっきり表示

.table-bordered は、表のすべてのセルに枠線を付けるクラスです。これは、エクセルで罫線を引く感覚に近く、情報をきっちり区切りたいときに向いています。数字やデータを正確に見せたい場面で役立ちます。


<table class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>状態</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>完了</td>
        </tr>
        <tr>
            <td>2</td>
            <td>未完了</td>
        </tr>
    </tbody>
</table>

ブラウザ表示

6. クラスは組み合わせて使える

Bootstrapのテーブルクラスは、1つだけでなく複数を同時に使えます。例えば、.table と .table-striped と .table-hover を一緒に指定できます。これは、機能付きの文房具を組み合わせて使うようなものです。必要な見た目を選んで付けるだけなので、難しい計算や設定は不要です。