Html 简明教程
HTML - Headers & Caption
标题和标题在表中使用，用于以结构化格式组织和呈现数据。
表格标题是表格的重要部分，为列提供标签。 * <th>* (表头) 元素用于定义表头。
标题用在表格中，为表格提供标题或说明。 * <caption>* 元素紧靠在打开表格标记后放置。
Syntax
<table>
<caption>Description of table</caption>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</table>Examples of HTML headers and captions
下面是一些示例，说明如何在 HTML 表格中使用标题和标题。
Define a header row for a table
{s0} 标签用于表示表格标题，通常用于 {s1} （表格行）元素内。与用于常规单元格的 {s2} （表格数据）标签不同，{s3} 专用于标题。在大多数情况下，表格的第一行被指定为标题行。
考虑一个带有 "Name" 和 "Salary" 标题的简单 HTML 表格
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Styling Table Headings
表格标题的样式可以增强表格的视觉吸引力。可以在 {s4} 元素上应用 CSS 以自定义其外观。在以下示例中，在 {s8} 部分内的 {s7} 标签中添加了一个简单的 CSS 样式，以修改表格标题的背景颜色和文本对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled HTML Table Header</title>
<style>
th {
background-color: #4CAF50;
color: white;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Using header cells in Any Row
虽然在表格的第一行使用 {s9} 很常见，但你可以在任何行中使用它，具体取决于你的要求。这种灵活性允许创建复杂表格，其中有多个标题行或标题穿插在表格中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled HTML Table Header</title>
<style>
th {
background-color: #4CAF50;
color: white;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<th>Additional Details</th>
<th>Specialization</th>
</tr>
<tr>
<td>Technical Lead</td>
<td>Web Development</td>
</tr>
</table>
</body>
</html>Using <thead> Element
{s11} 标签用于对表头单元格进行分组，以便可以对表头单元格应用组合的 CSS 样式。
{s12} 标签通常放置在 {s16} 元素内，并包含一个或多个 {s14} 元素，每个 {s14} 元素又包含表示列标题的 {s15} 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border=1>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<!-- Table body goes here -->
</table>
</body>
</html>Defining Multiple Header Rows
你可以在 {s18} 内包含多个 {s17} 元素以创建多个标题行。当你的表格结构需要更复杂的标题层次结构时，这非常有用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border=1>
<thead>
<tr>
<th colspan=2>Tutorialspoint</th>
</tr>
<tr>
<th>Role</th>
<th>Experience</th>
</tr>
</thead>
<tr>
<td>Technical Lead</td>
<td>5 Years</td>
</tr>
<tr>
<td>Web Developer</td>
<td>2 Years</td>
</tr>
</table>
</body>
</html>Using ‘<colgroup>’ Inside ‘<thead>’
{s21} 标签可以在 {s20} 内使用，以将一组列分组，并将 CSS 样式或属性应用于整个列。
在这个示例中，通过在 colgroup 标签中对这些列进行分组，我们将样式应用于表格的前两列。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.col1 {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Table with 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>Product ID</th>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smartphone</td>
<td>Electronics</td>
<td>$299.00</td>
</tr>
<tr>
<td>2</td>
<td>Office Chair</td>
<td>Furniture</td>
<td>$89.00</td>
</tr>
<tr>
<td>3</td>
<td>Laptop</td>
<td>Electronics</td>
<td>$999.00</td>
</tr>
</tbody>
</table>
</body>
</html>Combining with ‘<tfoot>’ and ‘<tbody>’
{s22} 标签通常与 {s25} （表格页脚）和 {s26} （表格正文）结合使用，以创建全面的表格结构。
在以下代码中，表格的结构将头部、正文和页脚内容分开，以实现更好的组织。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table</title>
</head>
<body>
<table border>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<p>
Footers are generally used to enter
sum of values of each column.
</p>
</body>
</html>Difference between <thead> and <th>
以下是突出显示 <thead> 和 <th> 之间差异的要点 −
-
{s27} 标签是一个结构元素，用于对标题内容进行分组，而 <th> 是定义标题单元格的单元格级元素。
-
在 {s29} 内使用 {s28}很常见，但 <th> 也可以在 <thead> 外部使用，以在常规行中定义标题。
-
包含 {s30} 是可选的；但是，使用它可以改善表格的语义结构。
Adding caption to a HTML Table
{s31} 将用作表格的标题或说明，并且显示在表格的顶部。
在以下代码中，我们将显示一个 HTML 表格顶部的标题
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>
</body>
</html>Table Header, Body, and Footer
表格可以分为三个部分：头部、正文和脚部。头部和脚部与文字处理文档中的页眉和页脚非常相似，它们在每一页中保持不变，而正文是表格的主要内容持有者。
用于分隔表格头部、正文和脚部的三个元素是 −
-
<thead> tag 可用于创建单独的表格标题。
-
<tbody> tag 用于表示表格的主体。
-
<tfoot> tag 可用于创建单独的表格页脚。
一个表格可以包含多个 <tbody> 元素，以表示不同的页面或数据组。但值得注意， <thead> 和 <tfoot> 标记应出现在 <tbody> 之前
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<th colspan="4">
This is the head of the table
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
This is the foot of the table
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
</tbody>
</table>
</body>
</html>