Html 简明教程
HTML - Headers & Caption
标题和标题在表中使用，用于以结构化格式组织和呈现数据。
Headers and Captions are used inside tables are used to organize and present data in a structured format.
表格标题是表格的重要部分，为列提供标签。 * <th>* (表头) 元素用于定义表头。
The table heading is an essential part of a table, providing labels for columns. The <th> (table header) element is used to define table headings.
标题用在表格中，为表格提供标题或说明。 * <caption>* 元素紧靠在打开表格标记后放置。
Captions are used with in the tables to provide a title or explanation for the table. The <caption> element is placed immediately after the opening table tag.
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 表格中使用标题和标题。
Here are some examples that illustrate how to use headers and captions in a HTML table.
Define a header row for a table
{s0} 标签用于表示表格标题，通常用于 {s1} （表格行）元素内。与用于常规单元格的 {s2} （表格数据）标签不同，{s3} 专用于标题。在大多数情况下，表格的第一行被指定为标题行。
The <th> tag is used to represent table headings, and it is typically used within the <tr> (table row) element. Unlike the <td> (table data) tag used for regular cells, <th> is reserved for headers. In most cases, the first row of a table is designated as the header row.
考虑一个带有 "Name" 和 "Salary" 标题的简单 HTML 表格
Consider a simple HTML table with headings for "Name" and "Salary"
<!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 样式，以修改表格标题的背景颜色和文本对齐方式。
Styling table headings can enhance the visual appeal of a table. CSS can be applied to <th> elements to customize their appearance. In the following example, a simple CSS style is added to the <style> tag within the <head> section to modify the background color and text alignment of the table headings.
<!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} 很常见，但你可以在任何行中使用它，具体取决于你的要求。这种灵活性允许创建复杂表格，其中有多个标题行或标题穿插在表格中。
While it’s common to use <th> in the first row of a table, you can utilize it in any row based on your requirements. This flexibility allows for the creation of complex tables with multiple header rows or headers interspersed within the table.
<!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 样式。
The <thead> tag is used to group table header cells so that a combined CSS style can be applied to header cells.
{s12} 标签通常放置在 {s16} 元素内，并包含一个或多个 {s14} 元素，每个 {s14} 元素又包含表示列标题的 {s15} 元素。
The <thead> tag is typically placed within the <table> element and contains one or more <tr> elements, each of which, in turn, contains <th> elements representing column headers.
<!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} 元素以创建多个标题行。当你的表格结构需要更复杂的标题层次结构时，这非常有用。
You can include multiple <tr> elements within <thead> to create multiple header rows. This is useful when your table structure requires a more complex hierarchy of headers.
<!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 样式或属性应用于整个列。
The <colgroup> tag can be used within <thead> to group together a set of column and apply CSS styling or attributes to entire columns.
在这个示例中，通过在 colgroup 标签中对这些列进行分组，我们将样式应用于表格的前两列。
In this example we apply style to first two columns of table by grouping those columns in colgroup tag.
<!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} （表格正文）结合使用，以创建全面的表格结构。
The <thead> tag is often combined with <tfoot> (table footer) and <tbody> (table body) to create a comprehensive table structure.
在以下代码中，表格的结构将头部、正文和页脚内容分开，以实现更好的组织。
In the following code the structure of table separates header, body, and footer content for better organization.
<!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> 之间差异的要点 −
Following are the points that highlights the differences between <thead> and <th> −
-
The <thead> tag is a structural element used to group header content, while <th> is a cell-level element defining a header cell.
-
It’s common to use <th> within <thead>, but <th> can also be used outside <thead> to define headers in regular rows.
-
Including <thead> is optional; however, using it improves the semantic structure of the table.
Adding caption to a HTML Table
{s31} 将用作表格的标题或说明，并且显示在表格的顶部。
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.
在以下代码中，我们将显示一个 HTML 表格顶部的标题
In the following code we will display a caption on top of a HTML table
<!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
表格可以分为三个部分：头部、正文和脚部。头部和脚部与文字处理文档中的页眉和页脚非常相似，它们在每一页中保持不变，而正文是表格的主要内容持有者。
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.
用于分隔表格头部、正文和脚部的三个元素是 −
The three elements for separating the head, body, and foot of a table are −
-
The <thead> tag to create a separate table header.
-
The <tbody> tag to indicate the main body of the table.
-
The <tfoot> tag to create a separate table footer.
一个表格可以包含多个 <tbody> 元素，以表示不同的页面或数据组。但值得注意， <thead> 和 <tfoot> 标记应出现在 <tbody> 之前
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <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>