いまさらHTML,CSS入門講座 | HTML5｜tfoot要素 - 表形式データ（Tabular data）-

いまさらHTML,CSS講座 > HTML5 > tfoot要素 - テーブル 表形式データ（Tabular data）-

tfoot要素

tfoot要素は、table要素のデータの列の合計（フッター）を構成する行のブロックを表します。

tfoot要素は、table要素の子として、必要に応じたcaption要素、colgroup要素、およびthead要素の後、必要に応じたtbody要素、およびtr要素の前に配置。または、必要に応じたcaption要素、colgroup要素、thead要素、tbody要素、およびtr要素の後に配置します。なお、1つのtable要素に、他のtfoot要素を配置することはできません。

例）

以下の本文に適用しているスタイルシート。
table{
width: 450px;
}
td{
text-align: center;
}

本文。
<table border="1">
<caption>
<p>最高・最低平均気温</p>
</caption>

<thead>
<tr>
<th>曜日</th><th>天気</th><th>最高気温</th><th>最低気温</th>
</tr>
</thead>

<tbody>
<tr>
<td>月曜日</td><td>晴れ</td><td>22℃</td><td>15℃</td>
</tr>
<tr>
<td>火曜日</td><td>晴れ/曇り</td><td>20℃</td><td>16℃</td>
</tr>
<tr>
<td>水曜日</td><td>曇り/雨</td><td>18℃</td><td>14℃</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="2">平均気温</td><td>20℃</td><td>15℃</td>
</tr>
</tfoot>
</table>

表示）