<tfoot>: 表フッター要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<tfoot> は HTML の要素で、表の一連の列を総括する行のセットを定義します。

試してみましょう

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: #fff;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

属性

この要素にはグローバル属性があります。

非推奨の属性

以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。

align

この列挙属性は、各セルの内容物について、水平方向の配置方法を制御します。以下の値が指定可能です。

  • left: 内容物をセルの左側に揃えます。
  • center: 内容物をセル内で中央揃えにします。
  • right: 内容物をセルの右側に揃えます。
  • justify: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
  • char: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は char 属性および charoff 属性で定義します。

この属性が設定されていない場合は、left 値であるものとします。

メモ:

  • left, center, right, justify の値と同様の効果を得るには、 CSS の text-align プロパティを使用してください。
  • CSS で char の値と同様の効果を得るには、 char の値を text-align プロパティの値として使用することができます。
bgcolor

表の背景色です。この属性は、列の各セルの背景色を定義します。 6 桁の 16 進数の RGB コードの前に '#' が付いた形です。定義済みの色キーワードの一つを使用することもできます。

同様の効果を得るには、 CSS の background-color プロパティを使用してください。

char

この属性は、列内のセルの内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 align が char に設定されていない場合、この属性は無視されます。

charoff

この属性は、char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。

valign

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

  • baseline: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、 bottom と同じ効果になります。
  • bottom: テキストを可能な限りセルの下端に近づけて配置します。
  • middle: テキストをセル内の中央に置きます。
  • top: テキストを可能な限りセルの上端に近づけて配置します。

メモ: この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。代わりに CSS の vertical-align プロパティを使用してください。

例

<tfoot> の例については、 <table> を参照してください。

コンテンツカテゴリー なし
許可されている内容 0 個以上の <tr> 要素
タグの省略 開始タグは必須。親 <table> 要素内に以降のコンテンツがない場合は終了タグを省略可能。
許可されている親要素 <table> 要素。<tfoot> はすべての <caption>, <colgroup>, <thead>, <tbody>, <tr> の各要素の後方に配置しなければなりません。これは HTML5 での要件です。
HTML4 では、 <tfoot> 要素は <tbody> 要素および <tr> 要素の後方に配置してはなりませんでした。
暗黙の ARIA ロール rowgroup
許可されている ARIA ロール すべて
DOM インターフェイス HTMLTableSectionElement

仕様書

Specification
HTML
# the-tfoot-element

ブラウザーの互換性

関連情報