2025年2月11日 / 最終更新日時 : 2025年2月11日 weeds お役立ち

tfootタグ -table内でフッター部分をグループ化する｜HTML辞典

<tfoot>タグとは？

<tfoot> タグは、HTML の <table>（表）内でフッター部分をグループ化するためのタグです。
通常、合計金額や備考など、表の最後に表示される情報をまとめるために使用されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<tfoot> は 開始タグ（<tfoot>）と閉じタグ（</tfoot>）の両方が必要 です。

基本的な記述方法

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
        <tr>
            <td>バナナ</td>
            <td>150円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>250円</td>
        </tr>
    </tfoot>
</table>

✅ 表のフッター部分（合計金額）が <tfoot> 内にグループ化されています。

使用できる主な属性

<tfoot> タグには特別な属性はありません。

CSSを使ったデザイン変更

<tfoot> を使うと、フッター部分の スタイルを統一して適用 できます。

tfoot {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: right;
}

✅ 合計金額などのフッター部分を強調表示できます。

適切な使用例

✅ <thead>, <tbody>, <tfoot> を使って表の構造を整理する

<table>
    <thead>
        <tr>
            <th>商品</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>みかん</td>
            <td>200円</td>
        </tr>
        <tr>
            <td>ぶどう</td>
            <td>300円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>500円</td>
        </tr>
    </tfoot>
</table>

✅ フッター部分を <tfoot> にまとめることで、表の構造が明確になります。

適切でない使用例（誤った使い方）

❌ <tfoot> を <table> の外に記述する

<!-- NG: <table> の外に <tfoot> を記述 -->
<tfoot>
    <tr>
        <td>合計</td>
        <td>250円</td>
    </tr>
</tfoot>
<table>
    <tr>
        <td>バナナ</td>
    </tr>
</table>

✅ 正しい書き方（<table> 内に記述）

<table>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>250円</td>
        </tr>
    </tfoot>
</table>

❌ <tfoot> なしで合計を記述する

<!-- NG: <tfoot> を省略 -->
<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
    </tbody>
    <tr>
        <td>合計</td>
        <td>100円</td>
    </tr>
</table>

✅ 正しい書き方（フッターを <tfoot> にグループ化）

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>100円</td>
        </tr>
    </tfoot>
</table>

<tfoot>タグと他のタグの違い

タグ	役割	特徴	適切な用途
`<tfoot>`	フッターをグループ化	`<tr>` を含む	合計や備考などの行
`<thead>`	ヘッダーをグループ化	`<tr>` を含む	表の見出し行
`<tbody>`	データ部分をグループ化	`<tr>` を含む	メインのデータ行
`<th>`	見出しセルを作成する	デフォルトで太字＋中央寄せ	列名やカテゴリー名
`<tr>`	行を作成する	`<th>` や `<td>` を内包	表の行

使用上の注意点

✅ <tfoot> は <table> 内に配置する

<table> の外では無効になるため、必ず表の中で使用する。

✅ <tr> で行を定義し、適切にセルを配置する

フッター内の行も <tr> で定義する。

✅ <thead>, <tbody> と組み合わせて使用すると、可読性とアクセシビリティが向上する

検索エンジンが構造を理解しやすくなり、SEO にも有利。

まとめ

<tfoot> タグは、HTML の 表のフッター部分をグループ化するためのタグ です。
適切に使用することで、データの可読性が向上し、アクセシビリティや SEO にも貢献します。

カテゴリー: お役立ち