HTML <tfoot> タグ

定義と使用法

<tfoot> タグを使用して、HTML テーブルのフッターの内容をグループ化します。

<tfoot> 要素と <thead> および <tbody> 要素を組み合わせて使用して、テーブルの各部分（フッター、ヘッダ、本文）を指定します。

ブラウザはこれらの要素を使用して、テーブルの本文をスクロールするときに、ヘッダとフッターを独立して表示できます。また、複数のページにわたる大きなテーブルを印刷するときには、これらの要素を使用して、ページのトップとボトムにテーブルのヘッダとフッターを印刷できます。

注意： <tfoot> 要素内には、少なくとも1つの <tr> タグ。

<tfoot> タグとして使用する必要があります： <table> 要素の子要素は、どの <caption>、<colgroup>、<thead> および <tbody> 要素の後ろに。

ヒント：デフォルトでは、<thead>、<tbody>、 <tfoot> 要素はテーブルのレイアウトに影響を与えません。ただし、これらの要素のスタイルを設定するために CSS を使用できます（以下の例を参照してください）！

インスタンス

例1

<thead>、<tbody>、<tfoot> 要素を含む HTML テーブル：

<table>
  <thead>
    <tr>
      <th>月</th>
      <th>貯蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

自分で試してみてください

例2

CSSを使用して <thead>、<tbody>、<tfoot> のスタイルを設定：

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>月</th>
      <th>貯蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

自分で試してみてください

例3

どのように揃えるか <tfoot> の中の内容（CSSを使用）：

<table style="width:100%">
  <tr>
    <th>月</th>
    <th>貯蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>合計</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

自分で試してみてください

例4

垂直に揃える方法 <tfoot> の中の内容（CSSを使用）：

<table style="width:100%">
  <tr>
    <th>月</th>
    <th>貯蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>合計</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

自分で試してみてください

グローバル属性

<tfoot> タグは、以下のイベント属性をサポートしています HTML 中のグローバル属性。

イベント属性

<tfoot> タグは、以下のイベント属性をサポートしています HTML 中のイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <tfoot> 要素：

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート