HTML - 标题和标题

欢迎，有抱负的网页开发者们！今天，我们将深入HTML标题和标题的精彩世界。作为一个教这些内容多年的老师，我可以告诉你，掌握这些元素将使你的表格看起来专业且井井有条。那么，让我们开始吧！

语法

在我们深入了解之前，让我们先了解一下我们将使用的语法。在HTML中，我们使用特定的标签来定义表格的标题和标题。以下是一个快速概览：

标签	描述
<thead>	定义表格中的标题组
<th>	定义表格中的标题单元格
<caption>	为表格指定标题

现在，如果这看起来像是一团字母汤，别担心。我们会一步一步地分解，很快你就能像专业人士一样使用这些标签！

HTML标题和标题的示例

让我们从一个简单的示例开始，看看这些标签是如何在实践中工作的。

<table>
<caption>我最喜欢的书籍</caption>
<thead>
<tr>
<th>标题</th>
<th>作者</th>
<th>年份</th>
</tr>
</thead>
<tbody>
<tr>
<td>杀死一只知更鸟</td>
<td>哈珀·李</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>乔治·奥威尔</td>
<td>1949</td>
</tr>
</tbody>
</table>

让我们分解一下：

1. 我们从<table>标签开始创建表格。
2. <caption>标签给我们的表格加了一个标题：“我最喜欢的书籍”。
3. <thead>部分包含我们的标题行。
4. 在<thead>内部，我们有一个<tr>（表格行），其中包含三个<th>（表格标题）单元格。
5. <tbody>部分包含我们的数据行，每个数据行都有<td>（表格数据）单元格。

渲染后，这个表格将有一个清晰的标题行，文本为粗体，使其容易理解每一列代表什么。

结合使用''和' '

现在，让我们更进一步，给我们的表格添加一个页脚，使用<tfoot>标签。

<table>
<caption>书籍销售</caption>
<thead>
<tr>
<th>标题</th>
<th>作者</th>
<th>销量</th>
</tr>
</thead>
<tbody>
<tr>
<td>了不起的盖茨比</td>
<td>F. 斯科特·菲茨杰拉德</td>
<td>25,000,000</td>
</tr>
<tr>
<td>麦田里的守望者</td>
<td>J.D. 塞林格</td>
<td>65,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">总销量：</th>
<td>90,000,000</td>
</tr>
</tfoot>
</table>

在这个示例中：

1. 我们在<tbody>之后添加了一个<tfoot>部分。
2. 脚注行使用<th colspan="2">来创建一个跨越两列的标题单元格。
3. 脚注部分的最后一个单元格显示了总销量。

这种结构有助于将主要内容（<tbody>）与摘要信息（<tfoot>）分开，使表格更加有组织且易于阅读。

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

现在，我经常看到学生们混淆<thead>和<th>，让我们来澄清一下：

• <thead>：这是一个包含表格标题内容的容器。它将标题信息组合在一起。
• <th>：这定义了表格中的单个标题单元格。

将<thead>视为包含所有标题信息的盒子，而<th>是盒子中的每个单独标签。

让我们看看这是如何工作的：

<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>国家</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>美国</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>加拿大</td>
</tr>
</tbody>
</table>

在这个示例中：

1. <thead>围绕整个标题部分。
2. 在<thead>内部，我们有一个单一的<tr>（表格行）。
3. 在该行内，我们有三个<th>单元格作为我们的列标题。

记住，如果需要，你可以在你的<thead>中有多个行，每行包含<th>单元格。

最后，让我们看一个总结我们所学的标签的表格：

标签	目的	示例
<table>	创建表格	<table>...</table>
<caption>	给表格添加标题	<caption>我的表格</caption>
<thead>	组合标题内容	<thead>...</thead>
<th>	定义标题单元格	<th>列名</th>
<tbody>	组合主体内容	<tbody>...</tbody>
<tfoot>	组合脚注内容	<tfoot>...</tfoot>
<tr>	创建表格行	<tr>...</tr>
<td>	创建标准数据单元格	<td>数据</td>

就这样！你现在装备了创建结构良好、可读性强的HTML表格的知识。记住，熟能生巧，所以不要害怕用这些标签进行实验。在你意识到之前，你将能够创建出任何数据分析师都会自豪的表格！

Credits: Image by storyset