【入門】Bootstrapの書き方　〜 テーブル(table) 〜

みなさんこんにちは さくちゃん です。

本日は、Bootstrapを使って「テーブルの挿入」について書いていきます。
では早速やっていきましょう！

Bootstrapの書き方　〜 テーブル(table)〜

基本的な書き方

テーブルを挿入するときは、<table>タグを使って書いていきます。
そしてclass名には「table」と指定してあげます。

完成図はこのような感じです。

書き方はこう書いていきます。
それぞれのタグについて説明していきます。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<thead>

<thead>は、テーブルの行のヘッダの部分を指します。

<thead>タグの中に、表示したい文字を書いていきます。

<tr>

<tr>タグは、table rowの略で、テーブルの行を意味します。

行に文字を表示したい場合、<tr>タグで囲み表示させます。

<th>

table headerの略で、ヘッダ部分の内容を意味します。

先ほぼの<tr>タグと組み合わせて、テーブル行のヘッダ部分のセルの内容を書きます。
属性 scope=”col” は 、<th>タグが「下方向」か「右方向」かを表しています。

• col　→　下方向
• row　→　右方向

例えば上の図でいうと、「First」の内容は下方向（col）か右方向（row）かということになります。
当然「First」が示す内容は「Mark」「Jacob」「Larry」ですので、書くときは

<th scope="col">First</th>

と書きます。

<tbody>

<tbody>は、テーブルのボディ部分を指します。

ボディ部分に書く内容は、<tbody>タグの中に書いていきます。

<td>

<td>はtable dataの略で、1つ1つのセルのことを指し、<tbody>タグの中で表示させたい内容を書きます。

以上がそれぞれのタグの説明でした。

ここでは出てきませんが、<tfoot>タグというものもあり、これはtable footerの略で、テーブルのフッター部分を指します。よく合計の値を表示させるときに使います。これも覚えておきましょう。

まとめ

今回は、テーブルの基本的な書き方について学びました。
Bootstrapでは、この基本的なテーブルに、様々なデザインを加えることができます。
次回、この様々なデザインの書き方について見ていきましょう。

今回参考にした内容はこちら