HTML 表格标题单元格

介绍

在 HTML 中，<th> 标签用于将一个单元格定义为一组单元格的标题。HTML 表格单元格有两种类型：标题单元格和标准单元格。标题单元格用作一组单元格的标题，而标准单元格则包含表格的数据。

本实验将逐步指导你如何使用 <th> 标签在 HTML 表格中创建标题单元格，并提供简要的解释和代码片段。

注意：你可以在 index.html 中练习编码，并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

创建一个基本的 HTML 表格

首先，我们需要使用 HTML 创建一个表格。

要创建表格，你应该使用 <table> 标签，每一行用 <tr> 标签表示，每个单元格用 <td> 标签表示。

例如，以下代码将创建一个包含两行两列的简单 HTML 表格：

<table>
  <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>

创建标题单元格

要创建标题单元格，我们需要在表格行中将 <td> 标签替换为 <th> 标签，以添加标题单元格。

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <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>

为 标签添加属性

<th> 标签支持多种属性，以帮助格式化和结构化标题单元格。

• Abbr：用于定义单元格内容的简短缩写。
• Colspan：指定单元格跨越的列数。
• Rowspan：指定单元格跨越的行数。
• Scope：指定标题标签关联的单元格。
• Header：用于指定与单元格相关的一个或多个标题单元格。

例如，以下代码将创建一个带有 "abbr" 和 "colspan" 属性的标题单元格：

<table>
  <tr>
    <th abbr="Header 1" colspan="2">Header 1 &amp; Header 2</th>
  </tr>
  <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>

总结

在这个逐步实验中，你已经学会了如何使用 <th> 标签在 HTML 表格中创建标题单元格。HTML 表格标题对于以结构化的方式组织数据非常重要。通过使用 th 标签，你可以创建标题单元格并管理其格式和属性。