tfootタグ

タグ tfoot はテーブルのフッター部分を定義します。一部の行グループに対してCSSスタイルを一度に適用できるようにグループ化するために使用されます。1つのテーブルに設定できる tfoot タグは1つだけです。

タグ tfoot は、 thead や tbody と一緒に HTMLテーブルのヘッダー部分、メイン部分、フッター部分を定義するためによく使用されます。デフォルトではブラウザは tfoot の内容をテーブルの下部に配置し、 thead を上部に配置します。

例

タグ tfoot でグループ化された行に、プロパティ color を使用してテキストの色を赤に設定してみましょう：

html<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>姓</th>
      <th>給与</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>名前1</td>
      <td>姓1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>名前2</td>
      <td>姓2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>件数: 2</td>
      <td>-</td>
      <td>合計: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

例

ここでは、 thead が上部ではなく、 tfoot が下部にない配置をしていますが、それでもブラウザはそれらを正しい位置に配置します：

html<table>
  <tfoot>
    <tr>
      <td>件数: 2</td>
      <td>-</td>
      <td>合計: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>名前1</td>
      <td>姓1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>名前2</td>
      <td>姓2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>名前</th>
      <th>姓</th>
      <th>給与</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

tfootタグ

例

例

関連項目