1. 首页
  2. HTML 菜鸟教程
  3. HTML - 表格标题

HTML - 表格标题

表内使用标题和标题，用于以结构化格式组织和呈现数据。

表格标题是表格的重要组成部分，为列提供标签。 <th>（表标题）元素用于定义表标题。

表中使用标题来提供表的标题或说明。<caption> 元素紧接在开始的表标记之后。

<caption> 标记在 HTML5 和 XHTML 中已弃用。大多数 Web 浏览器虽然支持它，但不建议在新网页中使用它。
如果要编写新代码，则应改用 figure 和 figcaption 元素。
figure 元素用于对相关内容进行分组；
figcaption 元素用于为内容提供标题。

语法  

<table>
<caption>表格说明</caption>
<tr>
	 <th>标题  1</th>
	 <th>标题  2</th>
	 <th>标题  3</th>
</tr>
</table>

HTML 的<headers>、<caption>示例

下面是一些示例，说明如何在 HTML 表格中使用标题和说明。

定义表的标题行

<th>标签用于表示表标题，通常在 <tr>（表行）元素中使用。与用于常规单元格的 <td>（表数据）标签不同，<th> 是为标题保留的。在大多数情况下，表的第一行被指定为标题行。

考虑一个简单的 HTML 表格，其中包含“姓名”和“薪水”的标题

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML表格标题</title>
</head>

<body>
	 <table border="1">
	 <tr>
			<th>名字</th>
			<th>薪水</th>
	 </tr>
	 <tr>
			<td>小明</td>
			<td>5000</td>
	 </tr>
	 <tr>
			<td>小白</td>
			<td>7000</td>
	 </tr>
	 </table>
</body>

</html>

设置表格标题的样式

设置表格标题的样式可以增强表格的视觉吸引力。CSS 可以应用于第 <> 个元素以自定义其外观。在以下示例中，将简单的 CSS 样式添加到 <head> 部分的 <style> 标签中，以修改表格标题的背景颜色和文本对齐方式。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>样式化HTML表格标题</title>
	 <style>
	 th {
			background-color: #4CAF50;
			color: white;
			text-align: left;
			padding: 8px;
	 }
	 </style>
</head>

<body>
	 <table border="1">
	 <tr>
			<th>名字</th>
			<th>薪水</th>
	 </tr>
	 <tr>
			<td>小明</td>
			<td>5000</td>
	 </tr>
	 <tr>
			<td>小白</td>
			<td>7000</td>
	 </tr>
	 </table>
</body>

</html>

在任意行中使用标题单元格

虽然在表的第一行中使用 <th> 很常见，但您可以根据需要在任何行中使用它。这种灵活性允许创建具有多个标题行或穿插在表中的标题的复杂表。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>样式化HTML表格标题</title>
	 <style>
			th {
				 background-color: #4CAF50;
				 color: white;
				 text-align: left;
				 padding: 8px;
			}
	 </style>
</head>

<body>
	 <table border="1">
	 <tr>
			<th>名字</th>
			<th>薪水</th>
	 </tr>
	 <tr>
			<td>小明</td>
			<td>5000</td>
	 </tr>
	 <tr>
			<th>其他详细信息</th>
			<th>专业化</th>
	 </tr>
	 <tr>
			<td>技术主管</td>
			<td>Web开发</td>
	 </tr>
	 </table>
</body>

</html>

使用 <thead> 元素

<thead> 标签用于对表标题单元格进行分组，以便将组合的 CSS 样式应用于标题单元格。

<thead> 标记通常放置在 <table> 元素中，并包含一个或多个 <tr> 元素，每个元素又包含表示列标题的第 <> 个元素。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML表格标题</title>
</head>

<body>
	 <table border=1>
			<thead>
				 <tr>
						<th>第1列</th>
						<th>第2列</th>
						<th>第3列</th>
				 </tr>
			</thead>
			<!-- 表格内容在这里 -->
	 </table>
</body>

</html>

定义多个标题行

您可以在 <thead>中包含多个 <tr> 元素以创建多个标题行。当表结构需要更复杂的标头层次结构时，这很有用。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML表格标题</title>
</head>

<body>
<table border=1>
	 <thead>
			<tr>
				 <th colspan=2>教程点</th>
			</tr>
			<tr>
				 <th>角色</th>
				 <th>经验</th>
			</tr>
	 </thead>
	 <tr>
			<td>技术主管</td>
			<td>5 年</td>
	 </tr>
	 <tr>
			<td>Web开发人员</td>
			<td>2 年</td>
	 </tr>
</table>
</body>

</html>

在<thead>中使用<colgroup>

<colgroup> 标记可以在 <thead> 中使用，将一组列组合在一起，并将 CSS 样式或属性应用于整个列。

在此示例中，我们通过将 colgroup 标记中的列分组来将样式应用于表的前两列。

<!DOCTYPE html>
<html lang="en">

<head>
	 <style>
			.col1 {
				 background-color: #f2f2f2;
			}
	 </style>
</head>

<body>
	 <h1>带有colgroup的表</h1>
	 <table border="1">
			<colgroup class="col1">
				 <col  style="width: 150px;">
				 <col  style="width: 200px;">
			</colgroup>
				 <col  style="width: 150px;">
				 <col  style="width: 100px;">
			<thead>
				 <tr>
							 <th>产品ID</th>
							 <th>产品名</th>
							 <th>类别</th>
							 <th>价格</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
							 <td>1</td>
							 <td>智能手机</td>
							 <td>电子学</td>
							 <td>$299.00</td>
				 </tr>
				 <tr>
							 <td>2</td>
							 <td>办公椅</td>
							 <td>家具</td>
							 <td>$89.00</td>
				 </tr>
				 <tr>
							 <td>3</td>
							 <td>笔记本电脑</td>
							 <td>电子学</td>
							 <td>$999.00</td>
				 </tr>
			</tbody>
	 </table>
</body>

</html>

<tfoot>和<tbody>结合

<thead> 标记通常与 <tfoot>（表脚）和 <tbody>（表体）组合在一起，以创建全面的表结构。

在下面的代码中，表的结构将页眉、正文和页脚内容分开，以便更好地组织。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML 表格</title>
</head>

<body>
	 <table border>
			<thead>
				 <tr>
						<th>第一列</th>
						<th>第二列</th>
						<th>第三列</th>
				 </tr>
			</thead>

			<tbody>
				 <tr>
						<td>值 1</td>
						<td>值 2</td>
						<td>值 3</td>
				 </tr>
			</tbody>

			<tfoot>
				 <tr>
						<td>总结</td>
						<td></td>
						<td></td>
				 </tr>
			</tfoot>
	 </table>
	 <p>
			页脚通常用于输入
			每列值的总和。
	 </p>
</body>

</html>

<thead> 和 <th>之间的区别

以下是突出<thead>和<th>之间的差异的要点

  • <thead> 标记是用于对标题内容进行分组的结构元素，而 <th> 是定义标题单元格的单元格级元素。
  • 通常在 <thead> 中使用 <th>，但 <th> 也可以在 <thead> 外部使用，以定义常规行中的标题。
  • 包括 <thead> 是可选的;但是，使用它可以改善表的语义结构。

向 HTML 表格添加标题

<caption>标签将用作表格的标题或说明，并显示在表格的顶部。

在下面的代码中，我们将在 HTML 表格的顶部显示一个标题

<html>
<head>
	 <title>HTML表格标题</title>
</head>

<body>
	 <table border="1">
			<caption>这是标题</caption>
			<tr>
				 <td>第1行第1列</td>
				 <td>第1行第2列</td>
			</tr>
			<tr>
				 <td>第2行第1列</td>
				 <td>第2行第2列</td>
			</tr>
	 </table>
</body>

</html>

表眉、正文和页脚

表格可以分为三个部分：标题、正文和脚。头部和脚部与文字处理文档中的页眉和页脚非常相似，每页都保持不变，而正文是表格的主要内容持有者。

将桌子的头部、身体和脚分开的三个元素是——

  • <thead> 标记，用于创建单独的表头。
  • <tbody> 标记，用于指示表的主体。
  • <tfoot> 标记，用于创建单独的表脚。

一个表可以包含多个 <tbody> 元素来指示不同的页面或数据组。但值得注意的是，<thead> 和 <tfoot> 标签应该出现在 <tbody> 之前

<!DOCTYPE html>
<html>

<head>
	 <title>HTML 表格</title>
</head>

<body>
	 <table border="1" width="100%">
			<thead>
				 <tr>
						<th colspan="4">
							 这是表格的头
						</th>
				 </tr>
			</thead>
			<tfoot>
				 <tr>
						<td colspan="4">
							 这是表格的脚
						</td>
				 </tr>
			</tfoot>
			<tbody>
				 <tr>
						<td>单元格 1</td>
						<td>单元格 2</td>
						<td>单元格 3</td>
						<td>单元格 4</td>
				 </tr>
				 <tr>
						<td>单元格 5</td>
						<td>单元格 6</td>
						<td>单元格 7</td>
						<td>单元格 8</td>
				 </tr>
			</tbody>
	 </table>
</body>

</html>
<< HTML - 表格 HTML - 表格样式 >>