HTMLの”table”タグをわかりやすく

tableタグは、Webページで表を作るために使う特別なタグです。

まるで教科書の表のように、情報を整理して表示することができます。

この記事を読めば複雑に見えるtableタグが理解できるようになります。

一緒にtableタグについての理解を深めて使いこなせるようになりましょう！

tableタグの基本

まず、tableタグは「<table>」という形で始まり、「</table>」という形で終わります。

その間に、行（<tr>）と列（<td>）で構成される表を作成します。

<table>
　<!--ここに行と列の要素を記述します-->
</table>

具体的な例を見てイメージしてみましょう。次のコードは、3つの行と2つの列を持つ表を作る例です。

<table>
  <!-----1行目のtrタグ----->
  <tr>
    <td>1列目</td>
    <td>2列目</td>
  </tr>

  <!-----2行目のtrタグ----->
  <tr>
    <td>1列目</td>
    <td>2列目</td>
  </tr>

  <!-----3行目のtrタグ----->
  <tr>
    <td>1列目</td>
    <td>2列目</td>
  </tr>
</table>

実際に表示してみると下のような３行２列の表を作ることができました！

セルの中にテキストや画像などのコンテンツを追加することもできます。

このように、tableタグを使うと、ウェブページ上で整理された表を作ることができます。

それぞれのセルに適切な情報を入れて、分かりやすい表を作成しましょう。

table要素内で表をセクション区分する

コードを記述するとき、表をさらに整理しする方法を見ていきましょう。

<table>タグを使って表を作成する際、<thead>、<tbody>、および<tfoot>というタグを使うことができます。

これを利用すれば見出し、本体、およびフッターのセクションを明確に分けることができます。

つまり、コード上で細かくパーツに分けて表を作ることができる、ということです。

具体的な例を見てみましょう。

次のコードは、<thead>、<tbody>、および<tfoot>を使用して、商品の表を作成する例です。

<table>
  <!-----表の見出し（商品名・価格・在庫数など）----->
  <thead>
    <tr>
      <!---thで見出しを定義--->
      <th>商品名</th>
      <th>価格</th>
      <th>在庫数</th>
    </tr>
  </thead>

  <!-----表の商品情報やデータ----->
  <tbody>
    <tr>
      <td>オレンジ</td>
      <td>100円</td>
      <td>10個</td>
    </tr>
    <tr>
      <td>りんご</td>
      <td>80円</td>
      <td>5個</td>
    </tr>
  </tbody>

  <!-----合計値や要約などの追加情報----->
  <tfoot>
    <tr>
      <td colspan="2">合計</td>
      <td>15個</td>
    </tr>
  </tfoot>
</table>

上記の例では、

このように、<thead>、<tbody>、および<tfoot>タグを使用することで、表をさらに整理し、見出し、本体、およびフッターのセクションを明確に分けることができます。

CSSでデザインするとき、表の見出し部分だけ違う色を表示するにはセレクタをtheadにすれば良いですし、データと合計値を分けるためにボーダーを表示するにはtfootにプロパティを当てれば良くなります。

このようにデザインしやすくなるだけでなく、検索エンジンにテーブル内の情報をより正確に伝えることができるようになります。つまり、SEOの観点からも良いということです。

①：<thead>について

<thread>は表の最初のセクションとして使用され、最上部に配置されることが一般的です。

これにより、表のレイアウトや構造がより明確になり、見出しとデータの関連性が強調されます。

②：<tbody>について

<tbody>要素は、<table>要素内で表の本体データをグループ化するためのものです。

つまり、<tbody>要素は表の主要なデータを含む行をまとめるために使用されます。

通常、表のデータは複数の行で構成され、これらの行は<tr>要素で表現されます。

<tbody>要素は、複数の<tr>要素を包含することで、表の本体データを表現します。

③：<tfoot>について

一般的には<tfoot>は最下部に配置されることが多いです。

しかし、必ずしも最下部である必要はありません。

表の本体データや他のセクション（<tbody>や<thead>）とフッター情報との関連性が強調される使い方をすれば問題はないです。

データの合計値などを表す際に使用してみましょう。

最後に

この記事では、HTMLのtableタグについて以下のことを解説しました。

これでデータをわかりやすく表にまとめて、Webページに表示させることができるようになりましたね！

コードの記述やチェックをする人にとっても見やすく、検索エンジンにも良い影響を与えやすくなるので有効的に使っていきましょう！