Bootstrap4 シート

Bootstrap4 表格

この記事では、Bootstrap4 フレームワークでテーブルを使用する方法について説明し、豊富で実用的なコード例を提供して、美しく機能豊富なテーブルをすばやく構築できるようにします。

---

1. 表格のスタイル

Bootstrap4は、さまざまなスタイルオプションを使用してテーブルをカスタマイズするためのさまざまなクラスを提供します。

1.1 デフォルトのテーブル

デフォルトのテーブルスタイルは、読みやすく、クリーンな外観を提供します。テーブルを作成するには、<table>要素に.tableクラスを追加します。

<table class="table">
  ...
</table>

1.2 枠線付きテーブル

テーブルに枠線を追加するには、.table-borderedクラスを使用します。

<table class="table table-bordered">
  ...
</table>

1.3 枠線なしテーブル

テーブルの枠線を削除するには、.table-borderlessクラスを使用します。

<table class="table table-borderless">
  ...
</table>

1.4 カラーテーマ

暗い背景のテーブルを作成するには、.table-darkクラスを使用します。

<table class="table table-dark">
  ...
</table>

1.5 ストライプテーブル

交互の行にストライプを追加するには、.table-stripedクラスを使用します。

<table class="table table-striped">
  ...
</table>

1.6 マウスオーバー

行にマウスオーバー効果を追加するには、.table-hoverクラスを使用します。

<table class="table table-hover">
  ...
</table>

1.7 小さなテーブル

よりコンパクトなテーブルを作成するには、.table-smクラスを使用します。

<table class="table table-sm">
  ...
</table>

2. 表のタイトル

2.1 表のタイトル

テーブルにタイトルを追加するには、<caption>タグを使用します。

<table class="table">
  <caption>従業員リスト</caption>
  ...
</table>

2.2 タイトルの色

.thead-lightまたは.thead-darkクラスを使用して、テーブルヘッダーの色を設定できます。

<table class="table">
  <thead class="thead-light">
    ...
  </thead>
  ...
</table>

3. 表の内容

3.1 表の本体

テーブルの本体を定義するには、<tbody>タグを使用します。

<table class="table">
  <tbody>
    ...
  </tbody>
</table>

3.2 テーブル行

テーブルの行を定義するには、<tr>タグを使用します。

<table class="table">
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</table>

3.3 テーブルセル

テーブルのセルを定義するには、<td>タグを使用します。

<table class="table">
  <tbody>
    <tr>
      <td>セル1</td>
      <td>セル2</td>
    </tr>
  </tbody>
</table>

3.4 テーブルヘッダーセル

テーブルヘッダーセルを定義するには、<th>タグを使用します。

<table class="table">
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
  </thead>
  ...
</table>

4. レスポンシブテーブル

4.1 横スクロール

小さな画面で水平スクロールするテーブルを作成するには、.table-responsiveクラスを使用します。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

5. その他のテーブルオプション

5.1 テーブルの配置

.text-left、.text-center、.text-rightクラスを使用して、テーブルの内容の配置を設定できます。

<table class="table">
  <tbody>
    <tr>
      <td class="text-left">左揃え</td>
      <td class="text-center">中央揃え</td>
      <td class="text-right">右揃え</td>
    </tr>
  </tbody>
</table>

5.2 コンテキストカラー

.table-primary、.table-successなどのコンテキストカラークラスを使用して、テーブルの行またはセルに背景色を追加できます。

<table class="table">
  <tbody>
    <tr class="table-primary">
      ...
    </tr>
    <tr>
      <td class="table-success">成功</td>
      ...
    </tr>
  </tbody>
</table>