LabEx
登录免费加入

使用基本属性创建 HTML 表格

CSSBeginner
立即练习

介绍

在本实验中，学生将学习如何使用基本的 HTML 表格标签和属性来创建和操作 HTML 表格。实验的重点是理解 HTML 表格的核心结构，包括 <table>、<tr>、<td> 和 <th> 等关键标签，这些标签对于在网页上以结构化的网格格式组织和呈现数据至关重要。

参与者将通过一个全面的学习过程，涵盖创建基本表格、添加表头和主体部分、使用 colspan 和 rowspan 合并单元格，以及应用基本的样式属性。在实验结束时，学生将掌握构建结构良好的 HTML 表格的实用技能，并理解如何使用 HTML 表格元素及其相关属性有效地表示数据。

理解 HTML 表格结构和基本标签

在这一步中，你将学习用于创建 HTML 表格的基本结构和标签。HTML 表格对于在网页上以结构化的网格格式组织和显示数据至关重要。

HTML 表格是使用以下几个关键标签创建的：

  • <table>：整个表格的主容器
  • <tr>：定义表格的一行
  • <td>：定义标准的表格单元格（数据单元格）
  • <th>：定义表格的表头单元格

让我们创建一个简单的示例来演示这些基本的表格标签。打开 WebIDE，在 ~/project 目录下创建一个名为 basic_table.html 的新文件。

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

让我们分解一下表格结构：

  1. <table border="1"> 创建带有可见边框的表格容器，border 属性是可选的。
  2. 第一个 <tr> 包含用于列标题的 <th> 表头单元格。
  3. 后续的 <tr> 元素包含带有实际内容的 <td> 数据单元格。

注意：了解更多关于如何在 WebIDE 中预览 HTML 文件。

HTML table structure example

需要记住的关键点：

  • 每个 <tr> 代表表格中的一行
  • <th> 用于表头单元格（通常加粗并居中）
  • <td> 用于标准的数据单元格
  • border 属性有助于可视化表格结构（尽管在实际应用中更推荐使用 CSS 进行样式设计）

创建包含行和列的简单表格

在这一步中，你将学习如何创建一个包含多行多列的更复杂的表格。基于上一步的内容，我们将探索如何通过不同数量的行和列来结构化表格，以有效地展示信息。

打开 WebIDE，在 ~/project 目录下创建一个名为 product_table.html 的新文件。我们将创建一个产品库存表格，以演示如何创建包含多行多列的表格。

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

创建包含多行多列的表格的关键点：

  1. 每个 <tr>（表格行）代表表格中的一行
  2. 在每个 <tr> 内部，多个 <td>（表格数据）元素创建列
  3. 每个 <tr> 中的 <td> 元素数量决定了列的数量
  4. 所有行应具有相同数量的列，以确保布局一致
  5. border 属性有助于可视化表格结构

注意我们是如何创建一个包含 4 列的表格的：

  • 第一行作为列标题
  • 三行额外的产品信息
  • 每行包含四个单元格，分别对应四列

在网页浏览器中显示的示例输出将展示一个 4x4 的网格，显示产品库存详细信息。

HTML table with product inventory data

添加表头和表格主体部分

在这一步中，你将学习如何使用语义化 HTML 标签 <thead>、<tbody> 和 <tfoot> 来更有效地组织表格内容，从而改进表格结构。这些标签有助于提高 HTML 表格的可读性和可访问性。

打开 WebIDE，在 ~/project 目录下创建一个名为 student_grades.html 的新文件。我们将创建一个学生成绩表格，演示如何使用表格部分标签。

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

关于表格部分的关键点：

  1. <thead>：包含带有列标题的表头行
  2. <tbody>：包含主要的数据行
  3. <tfoot>：包含汇总或页脚行
  4. 使用 <th> 代替 <td> 作为表头单元格
  5. 这些语义化标签有助于改进表格结构和可访问性

示例展示了：

  • 使用 <th> 的带有列标题的表头行
  • <tbody> 中的多行数据
  • <tfoot> 中带有班级平均分的页脚行

在网页浏览器中显示的示例输出将展示一个结构清晰的表格，包含表头、主体和页脚部分。

HTML table with thead tbody tfoot

使用 Colspan 和 Rowspan 合并表格单元格

在这一步中，你将学习如何使用 colspan 和 rowspan 属性水平或垂直合并表格单元格。这些属性允许你通过合并多个单元格来创建更复杂和灵活的表格布局。

打开 WebIDE，在 ~/project 目录下创建一个名为 event_schedule.html 的新文件。我们将创建一个会议日程表格，演示单元格的合并。

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

关于 colspan 和 rowspan 的关键点：

  1. colspan：水平合并跨列的单元格
    • 示例：<td colspan="2"> 将单元格跨 2 列
  2. rowspan：垂直合并跨行的单元格
    • 示例：<td rowspan="2"> 将单元格跨 2 行
  3. 使用这些属性时，需移除其他行中对应的单元格

在此示例中：

  • "Keynote Speech" 在 Room A 中跨 2 行
  • "Lunch Break" 跨 2 列，覆盖两个房间
  • 其他单元格保持标准的单单元格布局

在网页浏览器中显示的示例输出将展示一个包含合并单元格的表格，使日程更加紧凑和有条理。

HTML table with merged cells example

样式化和自定义表格属性

在这一步中，你将学习如何使用内联 CSS 和 HTML 属性来样式化和自定义 HTML 表格。适当的样式化可以提高表格的可读性和视觉吸引力。

打开 WebIDE，在 ~/project 目录下创建一个名为 styled_table.html 的新文件。我们将创建一个包含多种样式化技术的表格。

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

演示的关键样式化技术：

  1. border-collapse：移除表格单元格之间的间距
  2. 自定义字体和排版
  3. 带颜色的表头行
  4. 使用 :nth-child(even) 实现交替行颜色
  5. 表格行的悬停效果
  6. 单元格的内边距和边框样式

样式化选项包括：

  • 在 <style> 标签中使用内联 CSS
  • 单独的 CSS 文件（推荐用于大型项目）
  • 使用 style 属性的内联样式
  • 用于布局、颜色和交互性的 CSS 属性

在网页浏览器中显示的示例输出将展示一个专业样式化、易于阅读的表格，带有悬停和颜色效果。

Styled HTML table example

总结

在本实验中，参与者学习了使用 <table>、<tr>、<td> 和 <th> 等基本 HTML 标签创建 HTML 表格的基础知识。实验引导学习者理解表格结构，创建包含行和列的基本表格，并探索了添加表头、合并单元格和自定义表格属性的技术。

通过实践练习，实验展示了如何在网页中构建结构化的网格状数据展示，涵盖了定义表格行、创建表头和数据单元格以及使用 border 等属性增强表格可视化效果的关键概念。参与者通过动手实践，掌握了构建语义化且组织良好的 HTML 表格的技能，这些表格可以在各种网页设计场景中有效地展示信息。

相关 CSS 课程
CSS 入门教程

CSS 入门教程

cssweb-development
构建一个井字棋网页应用

构建一个井字棋网页应用

javascriptweb-development
创建打地鼠网页游戏

创建打地鼠网页游戏

javascriptweb-development