【HTML Living Standard】tfoot要素の使い方
tfoot要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
tfootオブジェクトは、HTMLのテーブルにおいて、フッター部分をグループ化するために使用されるオブジェクトです。このオブジェクトは、テーブル全体の集計結果や合計値、あるいは補足情報、注釈などを意味的にまとめる役割を担います。これにより、テーブルの構造がより明確になり、データの内容を理解しやすくなります。
tfootオブジェクトは、<table>要素の直接の子要素として配置され、<thead>（テーブルヘッダー）や<tbody>（テーブルボディ）といった他のグループ化要素と組み合わせて使用されます。HTMLのソースコード上では、<tbody>要素の後に記述されるのが一般的です。ブラウザによる実際のレンダリングでは、CSSによる特別な指定がない限り、テーブルの一番下の行として表示されます。tfootオブジェクト内には、<tr>（テーブルの行）要素を配置し、その中に<th>（ヘッダーセル）や<td>（データセル）といったセル要素を記述して、具体的なフッターの内容を定義します。
このオブジェクトを使用することで、視覚的な整形だけでなく、スクリーンリーダーなどの補助技術を利用するユーザーにとっても、テーブルのフッター情報がどこにあるかを明確に伝えることができます。また、大規模なテーブルを印刷する際に、各ページにフッター情報を繰り返し表示させるといった、特定のスタイル設定や機能を実現する上でも重要な意味を持ちます。テーブルの構造を論理的に分割し、データの意味付けを強化する点で、Webページのアクセシビリティと保守性の向上に貢献する重要な要素です。
構文(syntax)
1<tfoot> 2 <tr> 3 <td>フッターセル1</td> 4 <td>フッターセル2</td> 5 </tr> 6</tfoot>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML tfoot要素でテーブルの集計を表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>tfoot要素のサンプルコード</title> 7 <style> 8 /* テーブルの構造を視覚的に分かりやすくするためのCSS */ 9 table, th, td { 10 border: 1px solid black; 11 border-collapse: collapse; /* ボーダーを重ねて表示 */ 12 padding: 8px; /* セル内の余白 */ 13 } 14 table { 15 width: 100%; /* テーブルの幅を100%に設定 */ 16 } 17 /* tfootのセルの背景色を設定して、他の行と区別しやすくする */ 18 tfoot td { 19 background-color: #f2f2f2; 20 font-weight: bold; 21 } 22 </style> 23</head> 24<body> 25 26 <h1>製品在庫リスト</h1> 27 28 <!-- <table>要素は、表形式のデータを定義します --> 29 <table> 30 <!-- <thead>要素は、テーブルのヘッダー行のグループを定義します --> 31 <thead> 32 <tr> 33 <th>製品名</th> 34 <th>SKU</th> 35 <th>在庫数</th> 36 <th>最終更新日</th> 37 </tr> 38 </thead> 39 <!-- <tbody>要素は、テーブルの本体（データ行）のグループを定義します --> 40 <tbody> 41 <tr> 42 <td>ノートPC</td> 43 <td>PC001</td> 44 <td>15</td> 45 <td>2023-10-26</td> 46 </tr> 47 <tr> 48 <td>スマートフォン</td> 49 <td>SP002</td> 50 <td>30</td> 51 <td>2023-10-25</td> 52 </tr> 53 <tr> 54 <td>タブレット</td> 55 <td>TB003</td> 56 <td>10</td> 57 <td>2023-10-26</td> 58 </tr> 59 </tbody> 60 <!-- <tfoot>要素は、テーブルのフッター行のグループを定義します --> 61 <!-- 通常、合計や備考、集計データなどが含まれます --> 62 <tfoot> 63 <tr> 64 <!-- colspan="3" は、このセルが3つの列にまたがることを意味します --> 65 <td colspan="3">合計製品種別数 / 総在庫数</td> 66 <td>3 / 55</td> 67 </tr> 68 </tfoot> 69 </table> 70 71</body> 72</html>
HTMLのtfoot要素は、HTMLの<table>（テーブル）内でフッター部分の行グループを定義するために使用されます。主にテーブル全体の合計値、集計データ、備考など、表の最下部に表示される要約情報を含める際に利用します。この要素は、テーブルの構造を論理的に分割し、データの役割を明確にする役割を果たします。
サンプルコードでは、「製品在庫リスト」というテーブルのフッターとしてtfoot要素が使われています。ここには、製品種別の合計数と総在庫数といった集計データ「3 / 55」が表示されており、テーブル全体の情報をまとめる役割を担っています。tfootは<thead>（ヘッダー）や<tbody>（本体）と並んでテーブルの基本的な構造要素の一つであり、視覚的な区別だけでなく、セマンティックな意味を付与します。
tfoot要素自体は、特定の引数を取ることはなく、また何らかの値をプログラムに返す（戻り値を持つ）こともありません。これは、tfootがページの構造を定義するためのマークアップ要素であるためです。このように、テーブルのデータ構造をセマンティックに表現することで、視覚的な表示だけでなく、検索エンジンや補助技術にとっても内容が理解しやすくなります。システムエンジニアを目指す方にとって、データの構造を正しくマークアップすることは、可読性やメンテナンス性、アクセシビリティの高いウェブページを作成する上で非常に重要です。
tfoot要素は、HTMLテーブルにおいてフッター行のグループを意味的に定義するために使用されます。主に合計値や集計データ、備考など、テーブル全体の要約情報を配置する目的で利用します。この要素は<table>の子要素として、<thead>や<tbody>と同じ階層に記述します。HTMLの仕様では<tbody>の前後に配置可能ですが、一般的には<thead>と<tbody>の後に記述することで、コードの可読性が向上します。ブラウザでの表示は通常テーブルの一番下に位置します。サンプルコードのようにcolspan属性を使い、フッターセルを結合して表示することがよくあります。必須要素ではないため、フッター情報が不要な場合は省略しても問題ありません。
tfootとcolspanでテーブルの合計表示を工夫する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>tfoot と colspan のサンプル</title> 7 <style> 8 /* テーブルの見た目を整えるための最小限のスタイル */ 9 table { 10 width: 100%; 11 border-collapse: collapse; 12 margin-bottom: 20px; 13 } 14 th, td { 15 border: 1px solid #ccc; 16 padding: 8px; 17 text-align: left; 18 } 19 th { 20 background-color: #f2f2f2; 21 } 22 tfoot { 23 font-weight: bold; 24 background-color: #e0e0e0; 25 } 26 </style> 27</head> 28<body> 29 30 <h1>商品リスト</h1> 31 32 <table> 33 <!-- テーブルのヘッダー部分 --> 34 <thead> 35 <tr> 36 <th>商品名</th> 37 <th>数量</th> 38 <th>単価</th> 39 <th>小計</th> 40 </tr> 41 </thead> 42 <!-- テーブルのボディ（本体）部分 --> 43 <tbody> 44 <tr> 45 <td>りんご</td> 46 <td>2</td> 47 <td>150円</td> 48 <td>300円</td> 49 </tr> 50 <tr> 51 <td>みかん</td> 52 <td>3</td> 53 <td>100円</td> 54 <td>300円</td> 55 </tr> 56 <tr> 57 <td>バナナ</td> 58 <td>1</td> 59 <td>200円</td> 60 <td>200円</td> 61 </tr> 62 </tbody> 63 <!-- テーブルのフッター部分 --> 64 <tfoot> 65 <tr> 66 <!-- colspan="3" で、このセルが3つの列幅を占めるように結合 --> 67 <td colspan="3">合計</td> 68 <td>800円</td> 69 </tr> 70 </tfoot> 71 </table> 72 73</body> 74</html>
このサンプルコードは、HTMLのテーブルにおいて、フッター部分を定義するtfoot要素と、複数の列を結合するcolspan属性の使い方を示しています。
tfoot要素は、テーブルのフッター（脚注や合計など）をグループ化するために使用されます。テーブルのヘッダー（<thead>）や本体（<tbody>）とは独立した意味的な区切りを提供し、集計行などを明確に表現できます。tfoot要素は、通常<tbody>の後に記述されますが、ブラウザは常にフッターとして認識し、テーブルの最下部に表示します。この要素には引数や戻り値はありません。
コードでは、商品リストの合計行をtfoot内に配置しています。この合計行の最初のセルにはcolspan="3"という属性が設定されています。colspanは、テーブルセルが占める列の数を指定する属性です。colspan="3"とすることで、このセルが本来の1列だけでなく、隣接する2つの列も合わせて合計3つの列幅を占めるように結合されます。これにより、「合計」という文字が3列にわたって表示され、その右隣のセルに全体の合計金額が配置されることで、テーブルの見た目が整い、情報が分かりやすくなります。
tfoot要素は、テーブルのフッター部分を示し、合計行や注意書きなどの集計情報を記述する際に使用します。colspan属性は、複数の列をまたぐセルを作成する際に用い、指定した数値分の列が結合されます。この属性値を誤るとテーブルの表示が崩れる原因となるため、結合したい列数を正確に指定することが重要です。tfoot要素を用いることで、テーブルの意味構造が明確になり、スクリーンリーダーなどの補助技術や検索エンジンに内容が正しく伝わります。<thead>や<tbody>と組み合わせることで、テーブルの論理的な区分がより分かりやすくなります。サンプルコードのように<tbody>の後に記述することはHTMLの標準に則っており問題ありません。見た目の調整はCSSで行い、HTMLは構造の記述に集中することをお勧めします。