6日でできる 新HTML&CSS入門｜Bootstrapのテーブル
表にclassを加えるだけで、データはもっと見やすくなる。
Bootstrapのテーブル機能を使って、一覧表・比較表・管理画面の表をすばやく整えよう。
WebサイトやWebアプリでは、情報を表形式で見せたい場面がたくさんあります。たとえば、社員一覧、商品リスト、料金表、予約状況、成績表、売上データ、比較表などです。こうしたデータを整理して表示するために使うのがテーブルです。
HTMLだけでもtable、tr、th、tdなどを使って表を作れます。しかし、標準のHTMLテーブルは見た目がシンプルで、そのままでは少し読みにくく感じることがあります。枠線を付けたり、行ごとに背景色を変えたり、マウスを乗せた行を分かりやすくしたりするには、通常はCSSを追加して調整します。
Bootstrapを使うと、table、table-striped、table-bordered、table-hoverなどのclassを指定するだけで、見やすいテーブルを簡単に作れます。表の基本デザイン、しましま表示、枠線、ホバー効果、コンパクト表示、色付きテーブル、レスポンシブ対応などを、classの組み合わせで実現できます。
この記事では、Bootstrapのテーブル機能について、基本的なHTML構造、主要classの意味、表の見出しと本体の分け方、行見出しと列見出しの指定、レスポンシブ対応の考え方を、サンプルHTMLを使いながら分かりやすく解説していきます。
Bootstrapテーブルとは
Bootstrapテーブルとは、HTMLのtableにBootstrapが用意しているclassを追加して、見やすく整えた表のことです。
通常のHTMLテーブルは、情報を行と列で整理するための構造を作ります。Bootstrapを使うと、その構造にデザインを追加できます。たとえば、tableを指定するとBootstrap標準のテーブルデザインが適用されます。さらにtable-stripedを追加すると、1行ごとに背景色が変わります。table-borderedを追加すると、セルに枠線が付きます。
| class | 役割 |
|---|---|
| table | Bootstrap標準のテーブルスタイルを適用する |
| table-striped | 行ごとに背景色を交互に変える |
| table-bordered | セルに枠線を付ける |
| table-hover | マウスを乗せた行をハイライトする |
| table-sm | 行の高さを小さくしてコンパクトにする |
| table-responsive | 横に長い表をスクロール対応にする |
Bootstrapテーブルのよいところは、classを追加するだけで表の見た目を切り替えられる点です。CSSを一から書かなくても、一覧表として読みやすいデザインをすぐに作れます。
図1：Bootstrapのclassでテーブルを見やすく整える
この図から分かること
Bootstrapテーブルでは、HTMLのtableにclassを追加することで、表の見た目を簡単に整えられます。tableで基本デザインを適用し、table-stripedでしましま表示、table-borderedで枠線、table-hoverで行のハイライトを加えられます。表の構造はHTMLで作り、見た目はBootstrapのclassで整えると考えると分かりやすいです。
テーブルが使われる場面
テーブルは、データを行と列で比較したり、一覧として見せたりするときに使います。単なるレイアウト目的ではなく、表形式の情報を扱うときに使うのが基本です。
| テーブルが向いている場面 | 例 |
|---|---|
| 一覧表示 | 社員一覧、商品一覧、予約一覧 |
| 比較表示 | 料金プラン比較、機能比較 |
| 管理画面 | ユーザー管理、注文管理、在庫管理 |
| 集計結果 | 売上表、成績表、アクセス数 |
| スケジュール | 時間割、イベント日程、営業日 |
テーブルは、項目名と値の関係がはっきりしている情報に向いています。文章だけでは分かりにくい情報も、表にすると比較しやすくなります。
BootstrapをCDNで読み込む
今回のサンプルでは、Bootstrap 5をCDN経由で読み込みます。CDNを使うと、Bootstrapのファイルを自分でダウンロードしなくても、インターネット上のCSSやJavaScriptを読み込んで利用できます。
CSSはhead内に読み込みます。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">JavaScriptはbodyの終わり付近で読み込みます。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>テーブルの見た目を整えるだけであれば、主にCSSが働きます。ただし、Bootstrapのほかのコンポーネントを使う場合に備えて、JavaScriptも読み込んでおくとよいでしょう。
| 読み込み | 役割 |
|---|---|
| Bootstrap CSS | テーブル、ボタン、フォーム、余白などの見た目を整える |
| Bootstrap JavaScript | 動きのあるコンポーネントを動かす |
| CDN | インターネット上のBootstrapファイルを読み込む |
CDNを使う場合はインターネット接続が必要です。オフライン環境で学習する場合は、BootstrapのCSSやJavaScriptをダウンロードして、ローカルのcssフォルダーやjsフォルダーから読み込む方法を使います。
テーブルの基本構造
Bootstrapを使う場合でも、テーブルの基本構造は通常のHTMLと同じです。tableで表全体を作り、trで行を作り、thやtdでセルを作ります。
<table class="table">
<thead>
<tr>
<th scope="col">商品番号</th>
<th scope="col">商品名</th>
<th scope="col">カテゴリ</th>
<th scope="col">在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">P001</th>
<td>木製デスク</td>
<td>家具</td>
<td>12</td>
</tr>
</tbody>
</table>theadは表の見出し部分、tbodyは表の本体部分を表します。見出し行とデータ行を分けておくと、表の構造が分かりやすくなります。
| タグ・属性 | 役割 |
|---|---|
| table | 表全体を作る |
| thead | 表の見出し部分をまとめる |
| tbody | 表の本体データ部分をまとめる |
| tfoot | 表のフッター部分をまとめる |
| tr | 表の1行を作る |
| th | 見出しセルを作る |
| td | 通常のデータセルを作る |
| scope="col" | 列見出しであることを示す |
| scope="row" | 行見出しであることを示す |
Bootstrapのclassは、これらのHTML構造に対して見た目を整える役割を持ちます。まずはHTMLで正しい表構造を作り、そのうえでBootstrapのclassを追加しましょう。
BootstrapテーブルのサンプルHTML
ここでは、商品在庫一覧を表示するBootstrapテーブルを作成します。商品番号、商品名、カテゴリ、在庫数の4列を用意し、しましま表示、枠線、ホバー効果を追加します。
ファイル名： lesson55_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap テーブルサンプル 商品在庫一覧</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4">商品在庫一覧</h1>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">商品番号</th>
<th scope="col">商品名</th>
<th scope="col">カテゴリ</th>
<th scope="col">在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">P001</th>
<td>木製デスク</td>
<td>家具</td>
<td>12</td>
</tr>
<tr>
<th scope="row">P002</th>
<td>ワイヤレスマウス</td>
<td>PC周辺機器</td>
<td>35</td>
</tr>
<tr>
<th scope="row">P003</th>
<td>ステンレスボトル</td>
<td>生活雑貨</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ページ上部に「商品在庫一覧」という見出しが表示されます。その下に、商品番号、商品名、カテゴリ、在庫数の4列を持つテーブルが表示されます。
tableによってBootstrap標準のテーブルデザインが適用され、table-stripedによって行ごとに背景色が交互に変わります。table-borderedによってセルに枠線が付き、table-hoverによってマウスを乗せた行がハイライトされます。
このように、Bootstrapでは複数のclassを組み合わせることで、テーブルの見た目を簡単に強化できます。
サンプルHTMLの特徴
今回のサンプルでは、Bootstrapのテーブルclassを組み合わせています。
| class・タグ | 役割 |
|---|---|
| container | ページ内容を読みやすい幅で中央に配置する |
| mt-5 | 上方向に大きめの余白を付ける |
| mb-4 | 見出しの下に余白を付ける |
| table | Bootstrap標準のテーブルスタイルを適用する |
| table-striped | 行ごとに背景色を交互に表示する |
| table-bordered | 表全体に枠線を表示する |
| table-hover | マウスを乗せた行をハイライトする |
| thead | 表の見出し行をまとめる |
| tbody | 表の本体データをまとめる |
| th scope="col" | 列見出しを示す |
| th scope="row" | 行見出しを示す |
テーブルでは、見た目だけでなく構造も大切です。theadとtbodyを使って見出しと本体を分け、thにscopeを指定しておくと、表の意味が分かりやすくなります。
図2：table-striped、table-bordered、table-hoverの違い
この図から分かること
Bootstrapテーブルでは、tableを基本にして、必要なclassを追加して見た目を変えます。table-stripedは行ごとの背景色、table-borderedは枠線、table-hoverはマウスを乗せた行の強調を担当します。classを組み合わせることで、用途に合ったテーブルを作れます。
tableはBootstrapテーブルの基本class
Bootstrapでテーブルを整える場合、まずtableを指定します。
<table class="table">tableを指定すると、余白や罫線、文字の配置など、Bootstrap標準のテーブルスタイルが適用されます。ほかのテーブルclassを使う場合でも、基本としてtableを一緒に指定します。
| 指定 | 効果 |
|---|---|
| tableなし | ブラウザ標準の表に近い見た目 |
| tableあり | Bootstrap標準の整った表になる |
Bootstrapテーブルを使うときは、まずtableを付ける、と覚えておきましょう。そのうえで、しましま表示や枠線などを追加していきます。
table-stripedで行を見分けやすくする
table-stripedは、行ごとに背景色を交互に変えるclassです。データが多い表では、横方向に目線を動かすときに、どの行を見ているのか分かりにくくなることがあります。
<table class="table table-striped">table-stripedを使うと、1行ごとの区切りが視覚的に分かりやすくなります。社員一覧、商品一覧、注文一覧など、複数行のデータを扱う表に向いています。
| 向いている表 | 理由 |
|---|---|
| 社員一覧 | 行ごとに人物情報を追いやすい |
| 商品一覧 | 商品ごとの情報を見分けやすい |
| 注文一覧 | 注文単位で確認しやすい |
| 管理画面の一覧 | データ量が多くても読みやすい |
table-stripedは、シンプルなclassですが、表の読みやすさを大きく改善できます。
table-borderedで枠線を付ける
table-borderedは、テーブル全体に枠線を付けるclassです。セルとセルの区切りがはっきりするため、項目の対応関係を見やすくできます。
<table class="table table-bordered">枠線があると、列や行の境界がはっきりします。比較表や一覧表など、項目ごとの区切りを明確にしたい場合に便利です。
| 向いている表 | 理由 |
|---|---|
| 料金表 | プランごとの差が見やすい |
| 機能比較表 | 項目と対応内容を追いやすい |
| 在庫表 | 数値やカテゴリの区切りが分かりやすい |
| 申込一覧 | 入力項目のまとまりが分かりやすい |
table-borderedを使うと、表らしい見た目になります。情報をきっちり整理して見せたい場合に使いやすいclassです。
table-hoverで操作しやすくする
table-hoverは、マウスポインタを乗せた行をハイライトするclassです。
<table class="table table-hover">管理画面や一覧画面では、ユーザーがどの行を見ているのか分かりやすいことが大切です。table-hoverを使うと、マウスを乗せた行が強調されるため、行単位の確認がしやすくなります。
| 向いている表 | 理由 |
|---|---|
| 管理画面の一覧 | 操作対象の行を確認しやすい |
| 会員一覧 | どの会員情報を見ているか分かりやすい |
| 商品一覧 | 編集や詳細確認の対象を見つけやすい |
| 注文一覧 | 注文単位で視線を合わせやすい |
table-hoverは、クリック操作や詳細確認を行う一覧表と相性がよいclassです。
thead、tbody、tfootで表を分ける
HTMLのテーブルでは、thead、tbody、tfootを使って、表の見出し、本体、フッターを分けることができます。
| タグ | 役割 |
|---|---|
| thead | 表の見出し部分 |
| tbody | 表の本体データ部分 |
| tfoot | 表の合計や補足などのフッター部分 |
たとえば、売上一覧のような表では、theadに列名、tbodyに明細、tfootに合計金額を入れることがあります。
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">月</th>
<th scope="col">売上</th>
</tr>
</thead>
<tbody>
<tr>
<td>4月</td>
<td>250,000円</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">合計</th>
<td>250,000円</td>
</tr>
</tfoot>
</table>見出し、本体、フッターを分けると、表の構造が明確になります。データが多い表ほど、HTMLの構造を丁寧に書くことが大切です。
scopeで見出しの方向を示す
thにはscope属性を指定できます。scopeは、その見出しセルが列に対する見出しなのか、行に対する見出しなのかを示す属性です。
| 指定 | 意味 |
|---|---|
| scope="col" | 列見出しを表す |
| scope="row" | 行見出しを表す |
サンプルでは、thead内のthにscope="col"を指定しています。これは、商品番号、商品名、カテゴリ、在庫数が列の見出しであることを示します。
tbody内の先頭セルにはscope="row"を指定しています。これは、P001、P002、P003がそれぞれの行を表す見出しであることを示します。
<th scope="col">商品番号</th>
<th scope="row">P001</th>scopeを指定すると、表の構造がより分かりやすくなります。見た目だけではなく、HTMLの意味を整理するためにも役立ちます。
table-responsiveで横スクロールに対応する
テーブルは列数が多くなると、スマートフォンの画面幅に収まりにくくなります。その場合は、tableをdivで囲み、親要素にtable-responsiveを指定します。
<div class="table-responsive">
<table class="table table-striped table-bordered">
表の内容
</table>
</div>table-responsiveを使うと、画面幅が狭いときに横スクロールで表を確認できるようになります。列を無理に縮めて読みにくくするよりも、横スクロールできる形にしたほうが見やすい場合があります。
| 状況 | 対応 |
|---|---|
| 列数が少ない | 通常のtableで表示しやすい |
| 列数が多い | table-responsiveで横スクロール対応にする |
| スマホで文字が詰まる | 表を横スクロールにする |
| 比較表が横に長い | table-responsiveが便利 |
テーブルはスマートフォン対応で崩れやすい要素です。Bootstrapではtable-responsiveを使うことで、横に長い表も扱いやすくなります。
図3：table-responsiveでスマートフォンでも表を確認しやすくする
この図から分かること
列数が多いテーブルは、スマートフォンの画面幅では収まりにくくなります。table-responsiveを使うと、表を横スクロールで確認できるようになります。無理に列幅を狭くするのではなく、情報を保ったまま表示しやすくする方法として便利です。
Bootstrapテーブルのバリエーション
Bootstrapには、テーブルの見た目を変えるclassがいくつも用意されています。用途に合わせてclassを追加することで、表の雰囲気を変えられます。
| class | 効果・用途 |
|---|---|
| table-sm | 行の高さを小さくしてコンパクトにする |
| table-dark | テーブル全体を暗い配色にする |
| table-primary | 青系の強調色を使う |
| table-success | 緑系の配色を使う |
| table-danger | 赤系の配色を使う |
| table-warning | 黄色系の配色を使う |
| table-info | 水色系の配色を使う |
たとえば、管理画面で多くのデータを表示したい場合はtable-smが便利です。行の高さが少し小さくなるため、限られた画面に多くの情報を表示しやすくなります。
<table class="table table-sm table-bordered">色付きのclassは、状態や意味を表すときに使いやすいです。たとえば、成功した処理にはtable-success、注意が必要な情報にはtable-warning、危険やエラーに関係する情報にはtable-dangerを使うことがあります。
行やセルだけに色を付ける
Bootstrapでは、テーブル全体ではなく、特定の行やセルだけに色を付けることもできます。
<tr class="table-success">
<td>公開中</td>
<td>通常表示</td>
</tr>
<tr class="table-warning">
<td>確認中</td>
<td>注意が必要</td>
</tr>| class | 意味の例 |
|---|---|
| table-success | 成功、完了、正常 |
| table-warning | 注意、確認中 |
| table-danger | 危険、エラー、削除対象 |
| table-info | 補足情報 |
| table-secondary | 控えめな情報 |
行やセルに色を付けると、状態を視覚的に伝えやすくなります。ただし、色だけに頼ると見分けにくい場合もあるため、文字でも状態を説明することが大切です。
Bootstrapテーブルを使うときの実用ポイント
Bootstrapテーブルを使うときは、見た目だけでなく、情報の読みやすさも意識します。
| ポイント | 内容 |
|---|---|
| 列数を増やしすぎない | 列が多いとスマートフォンで読みにくくなる |
| 見出しを分かりやすくする | thで項目名を明確にする |
| theadとtbodyを分ける | 表の構造を整理する |
| scopeを指定する | 見出しの方向を分かりやすくする |
| table-responsiveを使う | 横に長い表をスマートフォン対応にする |
| table-hoverを使う | 一覧画面で行を追いやすくする |
| 色を使いすぎない | 強調したい意味に合わせて使う |
テーブルは、情報量が多くなりやすい部品です。すべての情報を詰め込むよりも、本当に必要な項目を整理して表示することが大切です。
Bootstrapテーブルでよくある失敗
Bootstrapテーブルを使うときは、いくつかの失敗が起こりやすいです。
| よくある失敗 | 原因 | 対策 |
|---|---|---|
| Bootstrapの見た目にならない | CSSを読み込んでいない | linkのURLやパスを確認する |
| しましま表示にならない | table-stripedを指定していない | tableと一緒にtable-stripedを指定する |
| 枠線が出ない | table-borderedを指定していない | table-borderedを追加する |
| スマホで横にはみ出す | table-responsiveを使っていない | tableをdiv class="table-responsive"で囲む |
| 表の意味が分かりにくい | theadやthを使っていない | 見出し行をtheadとthで整理する |
| 色の意味が伝わりにくい | 色だけで状態を表している | 文字でも状態を説明する |
Bootstrapのclassは便利ですが、HTML構造が崩れていると読みやすい表になりません。table、thead、tbody、tr、th、tdの基本構造を正しく書いたうえで、Bootstrapのclassを追加しましょう。
Bootstrapテーブルでデータを見やすくする考え方
Bootstrapのテーブル機能を使うと、HTMLの表を簡単に見やすく整えられます。tableを基本にし、table-striped、table-bordered、table-hoverなどを組み合わせることで、行の区切り、セルの境界、操作時のハイライトを追加できます。
データが多い場合は、theadとtbodyを分けて構造を整理しましょう。列見出しにはscope="col"、行見出しにはscope="row"を指定すると、表の意味がより分かりやすくなります。列数が多くスマートフォンで表示しにくい場合は、table-responsiveを使って横スクロール対応にします。
Bootstrapテーブルは、社員一覧、商品リスト、料金表、管理画面、比較表など幅広い場面で使えます。classを追加するだけで見た目を整えられるため、まずは基本のtable、table-striped、table-bordered、table-hoverから試し、必要に応じてtable-smやtable-responsiveなどを組み合わせていきましょう。