はじめに
HTML では、<tfoot> タグを使用して表のフッターコンテンツをグループ化できます。表のフッターには、要約情報、解説ノートまたはコメントが含まれる場合があります。<tfoot> タグは <table> タグの子要素の 1 つであり、<thead> および <tbody> タグと併用されます。この実験では、<tfoot> タグを使用して HTML で表のフッターを作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
基本的な表構造を作成する
表のヘッダー、表の本体、表のフッターセクションを含む基本的な表構造を作成します。
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Table Footer</td>
</tr>
</tfoot>
</table>
</body>
</html>
上記のコードでは、Name、Age、Gender の 3 つの列を持つ基本的な表構造を作成しました。また、表に 3 行のデータも追加しました。<tfoot> タグには、3 つの列 (colspan="3") にまたがる 1 つのセル (<td>) を持つ 1 行だけが含まれています。
表のフッターにコンテンツを追加する
基本的な表構造を作成したら、<tfoot> タグにコンテンツを追加できます。
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Age:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
この例では、表の中の人々の平均年齢を含む行を <tfoot> タグに追加しました。行の最初のセルは 2 つの列にまたがり (colspan="2")、「Average Age:」というテキストを表示します。2 番目のセルは実際の平均年齢値を表示します。
表のフッターに CSS を適用する
<tfoot> タグとその子要素に CSS スタイルを適用して、表のフッターの外観を調整できます。
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
<style>
tfoot {
background-color: #ccc;
font-weight: bold;
text-align: center;
}
tfoot td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Age:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
この例では、CSS の tfoot セレクタを使用して、<tfoot> タグに背景色、フォントの太さ、テキストの整列のスタイルを適用しました。また、tfoot td セレクタを使用して、表のフッターセクション内のセルにパディングを適用しました。
まとめ
<tfoot> タグは、表のフッターコンテンツをグループ化するために使用されます。完全な表構造を作成するために、<thead> および <tbody> タグと併用されます。HTML と CSS を使用して、<tfoot> タグとその子要素にコンテンツとスタイルを追加できます。
