Bootstrap 5 のテーブル入門：罫線・ストライプ・横スクロールの設定方法

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

生徒

「ホームページやブログに表（テーブル）を入れたいんですけど、難しいですか？」

先生

「Bootstrap 5を使えば、初心者でも簡単に表を作れますよ。いろんな装飾もできます。」

生徒

「たとえば罫線を付けたり、横にスクロールさせたりもできますか？」

先生

「はい、できます。では基本のテーブルから順に解説していきましょう！」

1. Bootstrap 5 のテーブルとは？初心者でも簡単に作れる表

Bootstrap 5（ブートストラップ・ファイブ）では、tableタグにクラスを付けるだけで、見た目が整った表（テーブル）を簡単に作ることができます。

たとえば、普通の表を作るには、tableタグにclass="table"をつけるだけです。


<table class="table">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>出身地</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>佐藤</td>
      <td>25</td>
      <td>東京</td>
    </tr>
    <tr>
      <td>鈴木</td>
      <td>30</td>
      <td>大阪</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

2. 罫線（けいせん）ありのテーブルを作るには？

罫線（けいせん）とは、表の中の線のことです。行や列の区切りが分かりやすくなります。Bootstrapでは、table-borderedクラスを使えば簡単に罫線付きのテーブルが作れます。


<table class="table table-bordered">
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノート</td>
      <td>100円</td>
      <td>あり</td>
    </tr>
    <tr>
      <td>ペン</td>
      <td>200円</td>
      <td>なし</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

3. ストライプ（交互に色がつく）テーブルを作るには？

行ごとに背景色が交互に変わると、表が見やすくなります。これを「ストライプ」といいます。Bootstrap 5では、table-stripedクラスをつけるだけで自動で交互に色がつきます。


<table class="table table-striped">
  <thead>
    <tr>
      <th>日付</th>
      <th>予定</th>
      <th>場所</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9月1日</td>
      <td>会議</td>
      <td>本社</td>
    </tr>
    <tr>
      <td>9月2日</td>
      <td>出張</td>
      <td>大阪支社</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

4. 横スクロール可能なテーブルを作るには？

テーブルの列が多くなると、スマホでは横にはみ出して見づらくなります。そんなときは、.table-responsiveというクラスを使うことで、横スクロールできるようになります。

ポイントは、テーブル全体を<div class="table-responsive">で囲むことです。


<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
      <th>利益</th>
      <th>コスト</th>
      <th>件数</th>
      <th>担当者</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>100万</td>
      <td>20万</td>
      <td>80万</td>
      <td>15</td>
      <td>山田</td>
    </tr>
  </tbody>
</table>
</div>

ブラウザ表示

5. テーブルの罫線・ストライプ・横スクロールを組み合わせる方法

これまで紹介したテーブルの機能は、組み合わせて使うことも可能です。たとえば、table-borderedとtable-stripedを一緒に使うと、罫線もあり、ストライプにもなる表が作れます。

さらにtable-responsiveを使えば、スマホ対応の横スクロールも加わります。


<div class="table-responsive">
<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>社員名</th>
      <th>部署</th>
      <th>メール</th>
      <th>電話番号</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中</td>
      <td>営業部</td>
      <td>tanaka@example.com</td>
      <td>090-1234-5678</td>
    </tr>
    <tr>
      <td>中村</td>
      <td>開発部</td>
      <td>nakamura@example.com</td>
      <td>080-2345-6789</td>
    </tr>
  </tbody>
</table>
</div>

ブラウザ表示

6. 初心者向けに覚えておきたいテーブルクラスの組み合わせ表

最後に、よく使うBootstrap 5のテーブル用クラスをまとめておきます。使いたいデザインに応じてクラスを付け加えるだけで、見た目が整ったテーブルが作れます。

table：基本のテーブルに必要
table-bordered：罫線（枠線）をつける
table-striped：ストライプ（交互の色）
table-responsive：スマホ対応で横スクロール可能に

これらを少しずつ組み合わせるだけで、Bootstrap 5でかっこよくて見やすい表が簡単に作れるようになります。

まとめ

これまで、Bootstrap 5 のテーブル機能を通して、初めて表を作る人でも迷わず活用できるさまざまな仕組みを確認してきました。罫線をつけることで情報の区切りがはっきりし、ストライプを付与すると行ごとの差が分かりやすくなり、横スクロールを取り入れるとスマートフォンでも見やすい構造になります。こうした表現は、ホームページやブログ、企業サイト、商品一覧ページ、スケジュール管理ページなど、情報を整理して提示したい場面で大きく役立ちます。特に、Bootstrap 5 は初心者がつまづきやすい「テーブルの見た目を整える作業」を直感的に扱えるため、学習の早い段階で導入する価値が高い要素です。

また、テーブルの構造そのものは HTML の基本となるため、Bootstrap 5 のクラスを使いながら表の骨組みを理解することで、自然とページ全体の見せ方や構造設計の感覚も身につきます。さらに、罫線・ストライプ・横スクロールを自由に組み合わせられる柔軟性は、ページ内容や閲覧環境に合わせて最適な見せ方を選ぶうえでとても便利です。とくに表の横幅が大きくなる場合、スマホ表示で崩れやすいという悩みが出ますが、Bootstrap の table-responsive クラスを使えば自然と閲覧性を保てるため、幅広い利用者に配慮したページが作成できます。

表のデザインについても、クラスを追加するだけで「落ち着いた印象」「情報を整理しやすい構造」「読み手に負担をかけない配色」などを簡単に実現できます。これは、CSS を一から書かなくても実践的なデザインが適用できるという Bootstrap 5 の大きな強みであり、学習過程でも実務でも多くの人に選ばれる理由のひとつです。さらに、複雑な情報量の多いテーブルでも、カードレイアウトやグリッドシステムと組み合わせることで、魅力的で見やすいレイアウトが構築しやすくなります。

下記は、特に実務でよく使われる「ストライプ＋罫線＋横スクロール」の三つを組み合わせた例です。このサンプルでは、Bootstrap 5 の特徴が自然にまとめられており、実際のサイト制作でも頻繁に利用されます。


<div class="table-responsive mt-4">
<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>カテゴリ</th>
      <th>名称</th>
      <th>説明</th>
      <th>更新日</th>
      <th>担当者</th>
      <th>状態</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品</td>
      <td>基礎ノート</td>
      <td>日常で使いやすい定番ノートです。</td>
      <td>2025/02/10</td>
      <td>佐藤</td>
      <td>公開中</td>
    </tr>
    <tr>
      <td>資料</td>
      <td>参考ガイド</td>
      <td>手順や設定を分かりやすくまとめた資料です。</td>
      <td>2025/01/20</td>
      <td>鈴木</td>
      <td>更新予定</td>
    </tr>
  </tbody>
</table>
</div>

ブラウザ表示

このように、Bootstrap 5 のテーブル機能は、情報整理が必要な場面でとても役立ち、読みやすい構造を自然に作り出します。さらに、日常的なサイト制作だけでなく、管理画面や分析用のデータ表示ページなど、業務向けのプロジェクトでも活躍します。複雑なテーブルを扱う場面でも、クラスを数種類組み合わせるだけで視認性が高まり、作業の効率化にもつながります。これからテーブルを使った表現を学ぶ人は、まず Bootstrap 5 の基本クラスを使用しながら、少しずつ自分のデザインや構造に合った工夫を増やしていくと良いでしょう。

先生と生徒の振り返り会話

生徒

「今回の内容で、罫線の付け方やストライプの設定、横スクロールの作り方が全部分かりました！思ったより簡単でした。」

先生

「そうですね。表は情報量が多くなるほど見づらくなりやすいので、Bootstrap を使って整えるととても読みやすくなりますよ。」

生徒

「横スクロールの仕組みは特に便利だなと思いました。スマホでも見やすい表が簡単に作れるのは助かりますね。」

先生

「そこは実務でもよく使う部分なので覚えておくと良いですよ。罫線やストライプも組み合わせれば、見やすさも一段と上がります。」

生徒

「次はもっと複雑な表にも挑戦してみたいです。今回の内容なら応用できそうな気がします！」

先生