HTML - tfoot 标签_HTML 菜鸟教程

<tfoot> 标签用于对 HTML 表中的页脚内容进行分组。HTML <tfoot> 标签用作 HTML 表格（<table>）的子元素。

<tfoot> 标签经常用于显示列总数，并可用于汇总表中的列。

传统上，<tfoot>标签将使用 CSS 进行样式设置，以引起对列总数的注意。

默认情况下，<thead>、<tbody> 和 <tfoot> 元素对表的组织方式没有影响。但是，您可以使用 CSS 设置这些元素的样式。

语法


<tfoot>...</tfoot>

属性

<tfoot> 标签支持 HTML 的全局属性和事件属性。下面提到的属性已被弃用，因此请使用 CSS 属性，而不是使用这些属性。

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。
bgcolor	color	指定每个列单元格的背景色（已弃用）。
char	character	指定内容与每个列单元格的字符的对齐方式（已弃用）。
charoff	number	指定用于偏移列单元格内容与 char 属性指定的对齐字符的字符数（已弃用）。
valign	baseline bottom middle top	指定每个列单元格的垂直对齐方式（已弃用）。

<tfoot> 标签示例

下面的示例将说明<tfoot> 标签的用法。在何处、何时以及如何使用<tfoot> 标签，以及如何设置表格页脚部分的样式。

创建表格页脚

以下示例，我们将在 HTML 表中使用 <tfoot> 标签。


<!DOCTYPE html>
<html>
<body>
	 <table border="1">
	 <thead>
			<tr>
				 <th>Students</th>
				 <th>English Marks</th>
				 <th>Hindi Marks</th>
			</tr>
	 </thead>
	 <tfoot>
			<tr>
				 <th colspan="3">Juliet - the best Performer!</th>
			</tr>
	 </tfoot>
	 <tbody>
			<tr>
				 <td>John</td>
				 <td>28</td>
				 <td>25</td>
			</tr>
			<tr>
				 <td>Peterson</td>
				 <td>25</td>
				 <td>25</td>
			</tr>
			<tr>
				 <td>Juliet</td>
				 <td>29</td>
				 <td>29</td>
			</tr>
	 </tbody>
	 </table>
</body>
</html>

设置表格页脚的样式

考虑另一种情况，我们将在表中使用 <tfoot> 标签并对其应用 CSS。


<!DOCTYPE html>
<html>
	 <style>
			tfoot {
				 background-color: #3f87a6;
			}
	 </style>
<body>
	 <table border="1">
			<thead>
				 <tr>
						<th>Items</th>
						<th>Price</th>
				 </tr>
			</thead>
	 <tfoot>
			<tr>
				 <th>Total</th>
				 <th>75</th>
			</tr>
	 </tfoot>
	 <tbody>
			<tr>
				 <td>5-Star</td>
				 <td>10</td>
			</tr>
			<tr>
				 <td>Dairy-Milk</td>
				 <td>45</td>
			</tr>
			<tr>
				 <td>KitKat</td>
				 <td>20</td>
			</tr>
	 </tbody>
	 </table>
</body>
</html>

对齐表格页脚元素

让我们考虑以下示例，我们将使用 CSS 将 <tfoot> 标签内的内容对齐到右侧。


<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #DE3163;
			}
	 </style>
<body>
	 <table style="width:50%">
			<tr>
				 <th>Students</th>
				 <th>Gathered Amount</th>
			</tr>
			<tr>
				 <td>Ram</td>
				 <td>$200</td>
			</tr>
			<tr>
				 <td>Suresh</td>
				 <td>$800</td>
			</tr>
			<tr>
				 <td>Maya</td>
				 <td>$500</td>
			</tr>
			<tfoot style="text-align:right">
				 <tr>
						<td>Total</td>
						<td>$1500</td>
				 </tr>
				 </tfoot>
	 </table>
</body>
</html>

表格页脚元素的垂直对齐

在以下示例中，我们将使用 vertical align 属性，并使 <tfoot> 标签内的内容在中间对齐。


<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #82E0AA;
			}
	 </style>
<body>
	 <table style="width:40%">
			<tr>
				 <th>ID</th>
				 <th>Employee</th>
			</tr>
			<tr>
				 <td>12234</td>
				 <td>Maya</td>
			</tr>
			<tr>
				 <td>12235</td>
				 <td>John</td>
			</tr>
			<tr>
				 <td>12236</td>
				 <td>Kevin</td>
			</tr>
			<tfoot style="vertical-align:middle">
				 <tr style="height:100px">
						<td>Total Employees</td>
						<td>3</td>
				 </tr>
			</tfoot>
	 </table>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - thead 标签 HTML - col 标签 >>