HTML <tfoot>タグ
例
<thead>、<tbody>、および<tfoot>要素を持つHTMLテーブル:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
<tfoot>
タグは、HTMLテーブルのフッターコンテンツをグループ化するために使用されます。
この要素は、
<thead>および<tbody><tfoot>
要素と組み合わせて使用され、テーブルの各部分(フッター、ヘッダー、本体)を指定します。
ブラウザはこれらの要素を使用して、ヘッダーとフッターに関係なくテーブル本体のスクロールを有効にすることができます。また、複数のページにまたがる大きなテーブルを印刷する場合、これらの要素により、テーブルのヘッダーとフッターを各ページの上部と下部に印刷できます。
注:要素には、<tfoot>
1つ以上の
<tr>タグが含まれている必要があります。
<tfoot>
タグは、次のコンテキストで使用する必要があります。<table>要素の子として、
< caption >
、 < colgroup>、
<thead>、および<tbody>要素の後に。
ヒント: <thead>、<tbody>、および<tfoot>
要素は、デフォルトではテーブルのレイアウトに影響しません。ただし、CSSを使用してこれらの要素のスタイルを設定できます(以下の例を参照)。
ブラウザのサポート
Element | |||||
---|---|---|---|---|---|
<tfoot> | Yes | Yes | Yes | Yes | Yes |
グローバル属性
この<tfoot>
タグは、HTMLのグローバル属性もサポートしています。
イベント属性
この<tfoot>
タグは、HTMLのイベント属性もサポートしています。
その他の例
例
CSSを使用して<thead>、<tbody>、および<tfoot>のスタイルを設定します。
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
例
<tfoot>内のコンテンツを(CSSを使用して)整列させる方法:
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="text-align:center">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
例
<tfoot>内のコンテンツを垂直方向に整列する方法(CSSを使用):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="vertical-align:bottom">
<tr
style="height:100px">
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
デフォルトのCSS設定
ほとんどのブラウザは<tfoot>
、次のデフォルト値で要素を表示します。
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}