HTML 表格标题单元格

介绍

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

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

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

Skills Graph

创建一个基本的 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> 标签添加属性

<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 标签，你可以创建标题单元格并管理其格式和属性。