HTMLタグ
<table>

tableの使い方

その名の通り、表（テーブル）を表現します。その内部に、行要素（tr: Table Row）と「列要素（td: Table Division）」を配置することで、行と列を表現します。

実際には、テーブルヘッダー（thead）、テーブルボディ（tbody）並びに、ヘッダー列要素（th）など、sその要素の役割を定義する事ができます。

これらのHTMLタグを正しく利用して表を記述することで、検索エンジンに意図を読み取ってもらいやすくなる事が考えられます。

tableの書き方

特に、「tableが何についての表なのか」を明確に記載することは、読者が「表が何についてのデータなのか？」を理解するのを助けるでしょう。下記の例ではsection要素により、明示的なセクションを形成し、そのセクション内に表についての見出しとキャプションを加えています。

<section>

  <h1>福太郎寿司渋谷店　価格表</h1>
  <p>2017年4月の価格です。季節により価格が変動する場合があります。</p>

  <table>
    <thead>
      <tr>
        <th>品目</th>
        <th>価格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ひらめ</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>まぐろ</td>
        <td>120円</td>
       </tr>
    </tbody>
  </table>

</section>

See the Pen qrpMEd by Joe (@akajoe) on CodePen.

tableタグで利用可能な属性

この要素で利用可能なタグ属性とその値についてです。

Attribute	Value	Description
border	1、または空文字	1の場合、ブラウザーが明確に表の境界線を描画するかもしれません。一方で、通常表の境界線はスタイルシート（CSS）によって定義される事が多いため、この属性を利用することは稀です。