HTML - thead 标签_HTML 菜鸟教程

HTML <thead>标签用于对HTML表的标题内容进行分组。它与 <tbody> 和 <tfoot> 元素结合使用，以指定表的每个部分。

<thead> 标签应用作 <table> 元素的子元素，位于任何 <tbody>、<tfoot> 和 <tr> 元素之前，以及任何 <caption> 和 <colgroup> 元素之后。浏览器可以使用这些元素来启用独立于页眉和页脚的表格正文滚动。

语法

<thead> ... </thead>

属性

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

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

<thead> 标签示例

下面的示例将说明<thead> 标签的用法。在何处、何时以及如何使用<thead> 标签在 HTML 中创建标题。

在表中创建标题

让我们看一下以下示例，我们将在其中使用 <thead> 标签。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #DE3163;
			}
	 </style>
<body>
	 <table>
			<thead>
				 <tr>
						<th>Subjects</th>
						<th>Marks</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>1A</td>
						<td>72</td>
				 </tr>
				 <tr>
						<td>1B</td>
						<td>74</td>
				 </tr>
				 <tr>
						<td>2B</td>
						<td>73</td>
				 </tr>
			</tbody>
			<tfoot>
				 <tr>
						<td>Total</td>
						<td>219</td>
				 </tr>
			</tfoot>
	 </table>
</body>
</html>

样式表

考虑到另一种情况，我们将使用 CSS 设置 <thead>、<tbody> 和 <tfoot>。

<!DOCTYPE html>
<html>
	 <style>
			thead {
				 color: #6C3483;
			}
			tbody {
				 color: #196F3D;
			}
			tfoot {
				 color: #DE3163;
			}
			table,
			th,
			td {
				 border: 1.5px solid #5DADE2;
			}
	 </style>
<body>
	 <table>
			<thead>
				 <tr>
						<th>Items</th>
						<th>Price</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>5Star</td>
						<td>$20</td>
				 </tr>
				 <tr>
						<td>KitKat</td>
						<td>$25</td>
				 </tr>
				 <tr>
						<td>MilkyBar</td>
						<td>$10</td>
				 </tr>
			</tbody>
			<tfoot>
				 <tr>
						<td>Total Bill</td>
						<td>$55</td>
				 </tr>
			</tfoot>
	 </table>
</body>
</html>

对齐标题内容

以下示例，我们将使用 CSS 将 <thead> 标签内的内容向右对齐。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #DE3163;
			}
	 </style>
<body>
	 <table style="width:100%">
			<thead style="text-align:right">
				 <tr>
						<th>Employees</th>
						<th>Age</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Ram</td>
						<td>23</td>
				 </tr>
				 <tr>
						<td>Raju</td>
						<td>22</td>
				 </tr>
				 <tr>
						<td>Maya</td>
						<td>24</td>
				 </tr>
			</tbody>
	 </table>
</body>
</html>

标题内容的垂直对齐

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

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #A569BD;
			}
	 </style>
<body>
	 <table style="width:50%">
			<thead style="vertical-align:middle">
				 <tr style="height:50px">
						<th>Cars</th>
						<th>Countries</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Maserati</td>
						<td>Italy</td>
				 </tr>
				 <tr>
						<td>Porsche</td>
						<td>Germany</td>
				 </tr>
				 <tr>
						<td>Dodge</td>
						<td>US</td>
				 </tr>
			</tbody>
	 </table>
</body>
</html>

支持的浏览器

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

<< HTML - td 标签 HTML - tfoot 标签 >>