Bootstrap - 表：初心者向けのやさしいガイド

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapのテーブルの素晴らしい世界に飛び込みます。codingの経験がなくても心配しないでください。この旅でのあなたのフレンドリーなガイドとして、私はステップバイステップでサポートします。このチュートリアルの終わりまでに、プロのように美しく、レスポンシブなテーブルを作成できるようになります！

Bootstrap Tablesとは？

まず、Bootstrapのテーブルとは何かについて話しましょう。あなたのお気に入りの本を本棚に並べることを思い浮かべてください。Bootstrapのテーブルは、その本棚のようなもので、あなたのウェブサイト用です！情報を整然と整理し、訪問者が読みやすく理解しやすいようにする手助けをしてくれます。

シンプルなテーブル

基本から始めましょう。シンプルなBootstrapテーブルの作成方法は以下の通りです：

<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>

このコードは、名前、年齢、都市の3つの列を持つテーブルを作成します。<thead>セクションはテーブルヘッダーを定義し、<tbody>には実際のデータが含まれています。class="table"がBootstrapの魔法を発揮します！

テーブルのバリエーション

Bootstrapはテーブルの異なるスタイルを提供しています。データのために違う服を選ぶようなものです！以下にいくつかのバリエーションがあります：

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

これらのクラスを<table>タグに追加することで、テーブルの全体の外観を変更できます。簡単です！

强調されたテーブル

特定の行やセルを強調したい場合は、Bootstrapがサポートしています：

<table class="table">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>アクティブな行</td>
<td>目立つ</td>
</tr>
<tr>
<td>通常の行</td>
<td class="table-primary">強調されたセル</td>
</tr>
</tbody>
</table>

table-activeクラスは全文を強調し、table-primaryなどのクラスは個々のセルに使用できます。

斯武条の行と列

学校で使っていたスジの付いたノートを思い出してください。テーブルでも同じことができます！

スジの付いた行：

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

スジの付いた列：

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

ホバリング行

テーブルをインタラクティブにしたいですか？ホバーすると行が光るようにします：

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

魔法のように感じます – 試してみてください！

枠線のテーブルと無枠のテーブル

テーブルに枠線を追加します：

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

または、全ての枠線を削除します：

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

小さなテーブル

よりコンパクトな外観が必要な場合は、table-smクラスを使用します：

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

データを多く詰め込む場合に最適です！

テーブルグループの区切

データをグループ化したい場合は、table-group-dividerクラスを使用します：

<table class="table">
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</tbody>
</table>

テーブルボディのグループ間に見える区切りを追加します。

垂直方向の配置

セル内のコンテンツの垂直方向の配置を制御できます：

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>このセルとその隣接セルは下寄せされています</td>
<td>下寄せ</td>
<td class="align-top">このセルは上寄せされています</td>
</tr>
</tbody>
</table>

align-middleを使用して中央寄せ、align-topを使用して上寄せします。

レスポンシブテーブル

すべてのデバイスでテーブルが見栄えするようにするには、table-responsiveクラスを使用します：

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

これにより、小さなスクリーンではテーブルが水平にスクロールできるようになります。テーブルにスーパーパワーの付与のようなものです！

ネスティング

テーブルの中にテーブルを入れることもできます！以下のようにします：

<table class="table table-striped">
<thead>
<tr>
<th>名前</th>
<th>詳細</th>
</tr>
</thead>
<tbody>
<tr>
<td>親行</td>
<td>
<table class="table table-sm">
<tr>
<td>ネストされた行1</td>
</tr>
<tr>
<td>ネストされた行2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

ロシアンマatrioshkaのように、テーブルの中にテーブルを入れることができます！

テーブルの構造

テーブルの部分を分解してみましょう：

テーブルヘッダー

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

<thead>は列ヘッダーを含みます。

テーブルフッター

<table class="table">
...
<tfoot>
<tr>
<td>フッター1</td>
<td>フッター2</td>
</tr>
</tfoot>
</table>

<tfoot>を使用してテーブルフッターを定義します。サマリーや合計に最適です。

キャプション

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

<table class="table">
<caption>ユーザー一覧</caption>
...
</table>

テーブルに名前タグを付けるようなものです！

結論

そして、ここまでが、Bootstrapを使ってテーブルを作成し、スタイルを付けるところです。実践が完璧にするので、さまざまなクラスの組み合わせを試してみてください。すぐに、効果的にデータを整理し、見た目も素晴らしいテーブルを作成できるようになります！

ハッピーコーディング、そして、あなたのテーブルが常に美しくBootstrap化されることを祈っています！

Credits: Image by storyset