【Vue.js】Bootstrapでv-forを用いた表（table）を作成する方法

【Vue.js】Bootstrapで表（table）を作成する方法

Vue.js

2022.10.252024.11.15

記事内に広告が含まれています。

この記事では、Bootstrapを使ったシンプルな表（table）の作り方について、具体的なコード例とともにわかりやすく解説します。

特に、表を使ったデータ表示を簡単に整えられるように、基本的なHTMLタグや属性についても解説しています。

シンプルな表の作り方
HTMLタグと属性
まとめ

シンプルな表の作り方

Bootstrapでは簡単にテーブルを作成するために、class=”table”を使用できます。

以下に、class=”table”を活用したサンプルコードをご紹介します。

表の列項目には「名前」、「年齢」、「出身地」を設定し、行項目は「1」、「2」、「3」としています。

<table class="table">
  <thead>
    <tr>
      <th scope="col" >
      <th scope="col">名前</th>
      <th scope="col">年齢</th>
      <th scope="col">出身地</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>田中</td>
      <td>20</td>
      <td>東京</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>鈴木</td>
      <td>25</td>
      <td>大阪</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>佐藤</td>
      <td>30</td>
      <td>北海道</td>
    </tr>
  </tbody>
</table>

上記のコードを実行すると、以下のような整った表が表示されます。

実行結果

Hello, world!

	名前	年齢	出身地
1	田中	20	東京
2	鈴木	25	大阪
3	佐藤	30	北海道

このように、Bootstrapが提供するtableクラスを使用することで、Bootstrapのデフォルトのスタイリングが適用された表を簡単に作成できます。

HTMLタグと属性

HTMLタグ一覧

表を作成する際に必要となる主なHTMLタグとその役割は次の通りです。

<table></table>		表全体を作成する。
<thead></thead>	table header	表の見出し部分をグループ化する。
<tbody></tbody>	table body	表のデータ部分（本体部分）の行をグループ化する。
<tr></tr>	table row	表の行を定義する。1行ごとに使用。
<th></th>	table header	見出し用のセルを定義する。通常、列や行の見出しに使用。
<td></td>	table data	表のデータセルを定義する。表の情報を表示する個々のマス目に使用。

属性一覧

Bootstrapのスタイルや意味をより明確にするために、次のような属性を使用します。

class=”table”	Bootstrapが提供する標準的な表のスタイルを適用するためのクラスです。このクラスを適用することで、表のデザインが自動的に整います。
scope=”row”	見出しセルとその行の他のデータセルを関連付けるための属性です。特に行の見出しに使用します。
scope=”col”	列の見出しを示し、縦方向に適用されるセルを関連付けます。見出しを整理し、表の構造をわかりやすくします。