エクセルを使ったことある方なら、テーブルレイアウトはすぐにわかると思います。

WEBサイトでは、比較表や料金表、カレンダーやフロアガイドなどでよく使用されていて、汎用性が高いので、学んでいきましょう。

*-*-* Chapter14 *-*-*

テーブルを作ろう

目次

1. テーブルレイアウトを見てみよう
2. テーブルを設置しよう！
3. テーブルを作るタグ「table」
4. テーブルの見出しタグ「thead」
5. 行を作るタグ「tr」
6. セル用の見出しを入れるタグ「th」
7. データ格納するタグ「tbody」
8. データセルを作るタグ「td」
9. scope属性ってなんだろう？
10. テーブルでフロアガイドを作ってみよう！

Youtubeで動画解説しています。

このブログをベースに、解説動画を作りましたので、併せてご覧ください。

チャンネル登録、宜しくお願いします。

SAKUWEB さくうぇぶ

テーブルレイアウトを見てみよう

Content→table→Overview

このコードが、基本となります。

その他、見やすいように色付きの行を作れたり、マウスが乗ると該当する行の色が変わって、今どこを参照しているかわかるようになる機能も用意されています。

今回は、基本のシンプルなテーブルを組んでいきますよ。

また、前回空白カラムを学んだ時に作ったエリア内に追加していきます。

テーブルを設置しよう！

　では、コードをコピーしてpタグ直下、aタグの上に貼りつけてください。

<p>ネコと一緒にくつろげるカフェで～</p>

<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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<a class="btn btn-outline-light w-100 my-5" href="#" role="button"><span class="bi bi-door-closed"></span> Access</a>

<p>ネコと一緒にくつろげるカフェで～</p>

​

<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 colspan="2">Larry the Bird</td>

      <td>@twitter</td>

    </tr>

  </tbody>

</table>

​

<a class="btn btn-outline-light w-100 my-5" href="#" role="button"><span class="bi bi-door-closed"></span> Access</a>

これでテーブルの設置は完了です。

テーブルの値の部分を、フロアガイドの内容に変えていけば完成ですが、

テーブルに関するタグが多いうえに、似たようなタグ名なので、先にそれぞれの意味を理解しておきましょう。

テーブルを作るタグ「table」

tableタグは、表を作るためのタグです。

tableタグの中に、行や列、見出しなどのタグを入れて、セルを作るイメージです。

なので、テーブルの外枠となります。

<style>table {border:1px solid black;}</style>

<table>
  <thead><!-- 見出し -->
    <tr>
      <th>見出し01</th>
      <th>見出し02</th>
    </tr>
  </thead>
  <tbody><!-- データ格納 -->
    <tr>
      <td>値01</td>
      <td>値02</td>
    </tr>
  </tbody>
</table>

xxxxxxxxxx

<style>table {border:1px solid black;}</style>

​

<table>

  <thead><!-- 見出し -->

    <tr>

      <th>見出し01</th>

      <th>見出し02</th>

    </tr>

  </thead>

  <tbody><!-- データ格納 -->

    <tr>

      <td>値01</td>

      <td>値02</td>

    </tr>

  </tbody>

</table>

テーブルの全体に枠線がついていますね。この範囲がテーブルになります。

テーブルの見出しタグ「thead」

テーブルの見出しに当たる部分は、theadタグを使います。

「table head」って意味ですね。

<style>thead {background:aqua;}</style>

<table>
  <thead><!-- 見出し -->
    <tr>
      <th>見出し01</th>
      <th>見出し02</th>
    </tr>
  </thead>
  <tbody><!-- データ格納 -->
    <tr>
      <td>値01</td>
      <td>値02</td>
    </tr>
  </tbody>
</table>

xxxxxxxxxx

<style>thead {background:aqua;}</style>

​

<table>

  <thead><!-- 見出し -->

    <tr>

      <th>見出し01</th>

      <th>見出し02</th>

    </tr>

  </thead>

  <tbody><!-- データ格納 -->

    <tr>

      <td>値01</td>

      <td>値02</td>

    </tr>

  </tbody>

</table>

theadタグの中には、行をつくるtrタグと、セル用の見出しthタグが記述されています。

行を作るタグ「tr」

テーブルの行を作るにはtrタグを使います。

「table row」って意味です。

<style>
table { border-collapse:collapse}
tr { border:1px solid blue;}
</style>

<table>
  <thead><!-- 見出し -->
    <tr>
      <th>見出し01</th>
      <th>見出し02</th>
    </tr>
  </thead>
  <tbody><!-- データ格納 -->
    <tr>
      <td>値01</td>
      <td>値02</td>
    </tr>
  </tbody>
</table>

xxxxxxxxxx

<style>

table { border-collapse:collapse}

tr { border:1px solid blue;}

</style>

​

<table>

  <thead><!-- 見出し -->

    <tr>

      <th>見出し01</th>

      <th>見出し02</th>

    </tr>

  </thead>

  <tbody><!-- データ格納 -->

    <tr>

      <td>値01</td>

      <td>値02</td>

    </tr>

  </tbody>

</table>

テーブルは行ごとにコーディングしていきます。

セル用の見出しを入れるタグ「th」

theadタグは見出し全体を囲むのに対し、thタグはセルごとの見出しに使います。

「table header」って意味になります。

<style>th {background:black;color:white;}</style>

<table>
  <thead><!-- 見出し -->
    <tr>
      <th>見出し01</th>
      <th>見出し02</th>
    </tr>
  </thead>
  <tbody><!-- データ格納 -->
    <tr>
      <td>値01</td>
      <td>値02</td>
    </tr>
  </tbody>
</table>

xxxxxxxxxx

<style>th {background:black;color:white;}</style>

​

<table>

  <thead><!-- 見出し -->

    <tr>

      <th>見出し01</th>

      <th>見出し02</th>

    </tr>

  </thead>

  <tbody><!-- データ格納 -->

    <tr>

      <td>値01</td>

      <td>値02</td>

    </tr>

  </tbody>

</table>

データ格納するタグ「tbody」

本体のデータ格納する部分は、tbodyタグを使います。

「table body」の略です。

<style>tbody {background:pink;}</style>

<table>
  <thead><!-- 見出し -->
    <tr>
      <th>見出し01</th>
      <th>見出し02</th>
    </tr>
  </thead>
  <tbody><!-- データ格納 -->
    <tr>
      <td>値01</td>
      <td>値02</td>
    </tr>
  </tbody>
</table>

xxxxxxxxxx

<style>tbody {background:pink;}</style>

​

<table>

  <thead><!-- 見出し -->

    <tr>

      <th>見出し01</th>

      <th>見出し02</th>

    </tr>

  </thead>

  <tbody><!-- データ格納 -->

    <tr>

      <td>値01</td>

      <td>値02</td>

    </tr>

  </tbody>

</table>

データセルを作るタグ「td」

表のセルを作るのがtdタグです。

「table data」の略です。

<style>td {background:purple;color:white;}</style>

<table>
  <thead><!-- 見出し -->
    <tr>
      <th>見出し01</th>
      <th>見出し02</th>
    </tr>
  </thead>
  <tbody><!-- データ格納 -->
    <tr>
      <td>値01</td>
      <td>値02</td>
    </tr>
  </tbody>
</table>

xxxxxxxxxx

<style>td {background:purple;color:white;}</style>

​

<table>

  <thead><!-- 見出し -->

    <tr>

      <th>見出し01</th>

      <th>見出し02</th>

    </tr>

  </thead>

  <tbody><!-- データ格納 -->

    <tr>

      <td>値01</td>

      <td>値02</td>

    </tr>

  </tbody>

</table>

scope属性ってなんだろう？

Bootstrapからコピーしたコードをよく見ると「scope」という記述がありますね。

scope属性は、そのセルがどのデータに対する見出しなのかを明確に示すことができます。

値がcolの場合は、列方向のセルを対象にするという意味になります。

他にもこんなのがありますよ。

エクセルのようにすでにセルが用意されているのではなく、セルもコーディングして作っていくんですね。

そしてエクセルでもある「セルの結合」、これをやっているのがcolspan属性。

colspanだと横のセル、rowspanだと縦のセルを、値の分結合してくれます。

では、サンプルコードをカスタマイズします。

テーブルでフロアガイドを作ってみよう！

1行目は見出し、見出し含め4行3列を作っていきましょう。

こんな感じになりますよ。

<table class="table text-white">
  <thead>
    <tr>
      <th scope="col">Floor</th>
      <th scope="col">Guide</th>
      <th scope="col">opening hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">F1</th>
      <td>CAFE</td>
      <td>09：00～13：30（L.O.13:00）<br>15：00～20：00（L.O.19:30）</td>
    </tr>
    <tr>
      <th scope="row">F2</th>
      <td>GOODS</td>
      <td>10：00～20：00</td>
    </tr>
    <tr>
      <th scope="row">F3</th>
      <td colspan="2">MODEL ROOM</td>
    </tr>
  </tbody>
</table>

xxxxxxxxxx

<table class="table text-white">

  <thead>

    <tr>

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

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

      <th scope="col">opening hours</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">F1</th>

      <td>CAFE</td>

      <td>09：00～13：30（L.O.13:00）<br>15：00～20：00（L.O.19:30）</td>

    </tr>

    <tr>

      <th scope="row">F2</th>

      <td>GOODS</td>

      <td>10：00～20：00</td>

    </tr>

    <tr>

      <th scope="row">F3</th>

      <td colspan="2">MODEL ROOM</td>

    </tr>

  </tbody>

</table>

​

ブラウザで確認してみましょう！

できましたね。

ついでに、アクセスマップのリンク、ドアのマークのアイコンにしてみましょう。

tableタグ直下に貼りつければ完成です！

<a class="btn btn-outline-light w-100 my-5" href="#" role="button"><span class="bi bi-door-closed"></span> Access</a>

xxxxxxxxxx

<a class="btn btn-outline-light w-100 my-5" href="#" role="button"><span class="bi bi-door-closed"></span> Access</a>

このブロックの完成形がこちら

イイ感じになったんじゃないですか！

SAKUWEB さくうぇぶ

次は、お知らせとお問合せを作っていきます。

これが終わればあとはFooterだけ！もう少しです！！