HTML 表格：创建和组织数据

介绍

HTML 表格用于以结构化的表格格式显示数据，由行和列组成。这对于清晰、有条理地呈现产品比较、财务报告或日程安排等信息至关重要。

在本实验 (Lab) 中，你将学习 HTML 表格的基本构建模块。你将从创建基本表格结构开始，然后逐步添加行、表头和数据单元格，以构建一个完整、功能性的表格。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 99%。获得了学习者 100% 的好评率。

创建表格标签以构建表格结构

在此步骤中，你将创建表格的主容器。<table> 标签是任何 HTML 表格的根元素，并包含所有其他与表格相关的元素。

首先，让我们设置基本的 HTML 文档结构。在左侧的文件浏览器中，找到并打开位于 ~/project 目录下的 index.html 文件。

将以下样板代码添加到 index.html。此代码定义了一个标准的 HTML5 文档，并在 <body> 中包含了一个空的 <table> 元素。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

添加代码后，你可以点击界面顶部的 Web 8080 标签来预览你的页面。你目前还看不到任何内容，因为表格是空的，但这可以确认文件正在正确提供服务。

添加 tr 标签以创建表格行

在此步骤中，你将为表格添加行。表格中的每一行（水平方向）都由 <tr> 标签定义，它代表“table row”（表格行）。行内的所有内容，例如表头或数据单元格，都必须放在 <tr> 元素内。

让我们为表格添加两行。第一行最终将用于存放列标题，第二行将用于存放数据。

修改你的 index.html 文件，在 <table> 标签内包含两个 <tr> 元素，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr></tr>
      <tr></tr>
    </table>
  </body>
</html>

保存文件。如果你查看 Web 8080 标签，仍然不会看到任何可见的变化，因为这些行目前还不包含任何内容或边框。

插入 th 标签用于表头单元格

在此步骤中，你将为表格定义表头单元格。表头单元格使用 <th> 标签创建，它代表“table header”（表头）。这些标签放在 <tr> 元素内，通常会渲染为粗体、居中文本，以区别于普通数据单元格。

让我们为表格的第一行添加两个表头：“Name”和“Age”。

更新你的 index.html 文件，在第一个 <tr> 标签内添加两个 <th> 元素：

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

现在，如果你切换到 Web 8080 标签，你将看到显示的“Name”和“Age”表头。

使用 td 标签用于数据单元格

在此步骤中，你将为表格添加实际数据。标准数据单元格使用 <td> 标签创建，它代表“table data”（表格数据）。这些标签放在 <tr> 元素内，并包含与列标题相对应的信息。

让我们为一位名叫“Alice”且年龄为“30”岁的人添加一行数据。这些数据将放入我们表格的第二行。

更新你的 index.html 文件，在第二个 <tr> 标签内添加两个 <td> 元素：

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

保存文件并检查 Web 8080 标签。你现在将看到数据“Alice”和“30”显示在第二行，并与其各自的表头对齐。

为 table 添加 border 属性以提高可见性

在此步骤中，你将使表格的结构可见。默认情况下，HTML 表格渲染时没有边框。为了快速添加边框以进行可视化，你可以使用 <table> 标签上的 border 属性。

让我们为表格添加一个 1 像素的边框。修改 index.html 中开头的 <table> 标签，加入 border="1"。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

保存文件后，刷新 Web 8080 标签。你现在将看到一个完整的表格，表格本身以及每个单元格周围都有可见的边框，清晰地显示了行和列的结构。虽然 border 属性很简单，但现代网页设计使用 CSS 进行样式设置，这提供了更多控制和灵活性。

总结

恭喜你！你已成功创建了一个基本的 HTML 表格。

在本实验中，你学会了如何：

使用 <table> 标签创建表格容器。
使用 <tr> 标签定义表格行。
使用 <th> 标签创建列的表头单元格。
使用 <td> 标签添加数据单元格。
添加 border 属性使表格结构可见。

这些是显示任何表格数据在网页上的基本元素。你现在可以以此为基础，创建更复杂和更具样式的表格。