tfootタグ
タグ tfoot はテーブルのフッター部分を定義します。
一部の行グループに対してCSSスタイルを一度に適用できるように
グループ化するために使用されます。1つのテーブルに
設定できる tfoot タグは1つだけです。
タグ tfoot は、
thead や
tbody と一緒に
HTMLテーブルのヘッダー部分、メイン部分、
フッター部分を定義するためによく使用されます。
デフォルトではブラウザは tfoot の内容を
テーブルの下部に配置し、 thead を
上部に配置します。
例
タグ tfoot でグループ化された行に、
プロパティ color を使用して
テキストの色を赤に設定してみましょう：
<table>
<thead>
<tr>
<th>名前</th>
<th>姓</th>
<th>給与</th>
</tr>
</thead>
<tbody>
<tr>
<td>名前1</td>
<td>姓1</td>
<td>200$</td>
</tr>
<tr>
<td>名前2</td>
<td>姓2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>件数: 2</td>
<td>-</td>
<td>合計: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
例
ここでは、 thead が上部ではなく、
tfoot が下部にない配置をしていますが、
それでもブラウザはそれらを正しい位置に配置します：
<table>
<tfoot>
<tr>
<td>件数: 2</td>
<td>-</td>
<td>合計: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>名前1</td>
<td>姓1</td>
<td>200$</td>
</tr>
<tr>
<td>名前2</td>
<td>姓2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>名前</th>
<th>姓</th>
<th>給与</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
