table – thead, tdody, tfoot

tableタグ概要

tableタグはthead,tbody,tfootで構成される。ブラウザによっては対応していない場合があるので注意（参考：https://caniuse.com/mdn-html_elements_thead）。

使い方

<table>
  <thead>
    <tr>
      <th>テーブルヘッダの項目1</th>
      <th>テーブルヘッダの項目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>コンテンツ1</td>
      <td>コンテンツ2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>テーブルフッタの項目1</td>
      <td>テーブルフッタの項目2</td>
    </tr>
  </tfoot>
</table>

 

thead

“thead”はtableタグのヘッダーの役割を果たします。セマンティックな考えで言えばテーブルの1行目はテーブルコンテンツ内と別々で見たほうがコード的にもデザイン的にもわかりやすい。

<table>
  <thead>
    <tr>
      <th>テーブルヘッダの項目1</th>
      <th>テーブルヘッダの項目2</th>
    </tr>
  </thead>
</table>

 

tbody

tableタグのコンテンツ部分。コンテンツの横幅は見出し項の横幅によって決まるので、テーブルレイアウトを考えるときは見出しをちゃんと決めてからコーディングしたい。

<table>
  <tbody>
    <tr>
      <td>コンテンツ1</td>
      <td>コンテンツ2</td>
    </tr>
  </tbody>
</table>

 

tfoot

tableタグのフッター。コーディング例としては、料金表の合計金額といった要素に使ったりする。

<table>
  <tfoot>
    <tr>
      <td>テーブルフッタの項目1</td>
      <td>テーブルフッタの項目2</td>
    </tr>
  </tfoot>
</table>

Recent Posts

Recent Column