webmas.jp

<tfoot> 要素は表（テーブル）のフッターを示します。<thead>、<tbody> 等と組み合わせて使用すると構造や意味付けが明確化しアクセシビリティも向上します。

分類

なし

内包できるもの

<tr>

属性

グローバル属性のみ

サンプル

<thead>, <tbody>, <tfoot> の組み合わせ

HTML

<table>
	<thead>
		<tr>
				<th>製品</th>
			<th>金額</th>
		</tr>
	</thead>
	<tbody>
		<tr>
				<th>iPhone</th>
				<td>120,000</td>
		</tr>
		<tr>
				<th>Surface Duo</th>
				<td>150,000</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>合計</th>
			<td>270,000</td>
		</tr>
	</tfoot>
</table>

CSS

スタイルなしの場合、境界線が表示されず見にくいためいくつか CSS を指定します。

table {
	border: 2px solid #333333;
	border-collapse: collapse;
}

thead, tfoot {
	background-color: #cccccc;
}

th, td {
	border: 1px solid #333333;
	padding: 5px;
}

プレビュー