跳到主要内容

HTML 表格基础

HTML表格是网页中用于展示结构化数据的强大工具。无论是展示数据列表、比较信息，还是创建复杂的布局，表格都能派上用场。本文将带你从零开始学习HTML表格的基础知识，并通过实际案例帮助你掌握如何在实际项目中应用表格。

什么是HTML表格？​

HTML表格是由行和列组成的二维结构，用于组织和展示数据。表格的基本结构包括表头（<th>）、行（<tr>）和单元格（<td>）。通过组合这些元素，你可以创建出各种复杂的表格布局。

创建基本表格​

让我们从一个最简单的表格开始。以下是一个包含两行两列的基本表格示例：

html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

输出结果：

姓名年龄
张三25
李四30

在这个例子中，<table>标签定义了表格的容器，<tr>标签定义了表格的行，<th>标签用于表头单元格，<td>标签用于数据单元格。

表格的结构​

表头（<th>）​

表头单元格通常用于描述列或行的内容。默认情况下，表头单元格中的文本会加粗并居中显示。

html
<th>表头内容</th>

行（<tr>）​

每一行由<tr>标签定义，行中可以包含多个单元格。

html
<tr>
  <td>单元格1</td>
  <td>单元格2</td>
</tr>

单元格（<td>）​

单元格是表格中的基本单位，用于存放数据。

html
<td>数据内容</td>

表格的实际应用​

案例1：学生成绩表​

假设你需要展示一个班级的学生成绩表，可以使用以下代码：

html
<table>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>英语</th>
    <th>物理</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>90</td>
    <td>85</td>
    <td>88</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>78</td>
    <td>92</td>
    <td>80</td>
  </tr>
</table>

输出结果：

姓名数学英语物理
张三908588
李四789280

案例2：商品价格表​

如果你需要展示一个商品价格表，可以使用以下代码：

html
<table>
  <tr>
    <th>商品名称</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>¥5.00</td>
    <td>100</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>¥3.50</td>
    <td>150</td>
  </tr>
</table>

输出结果：

商品名称价格库存
苹果¥5.00100
香蕉¥3.50150

表格的高级特性​

合并单元格​

有时你可能需要合并单元格来创建更复杂的布局。HTML提供了colspan和rowspan属性来实现这一点。

  • colspan：合并列
  • rowspan：合并行
html
<table>
  <tr>
    <th colspan="2">姓名与年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td rowspan="2">程序员</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

输出结果：

姓名与年龄职业
张三25
李四30
提示

合并单元格时，确保合并后的单元格数量与表格结构一致，否则可能导致布局错乱。

总结​

HTML表格是网页开发中不可或缺的工具，适用于展示各种结构化数据。通过本文的学习，你应该已经掌握了如何创建基本表格、添加表头和单元格，以及如何在实际项目中应用表格。接下来，你可以尝试创建更复杂的表格布局，或者结合CSS为表格添加样式。

附加资源与练习​

  • 练习1：创建一个包含三列（姓名、邮箱、电话）的联系人表格。
  • 练习2：尝试使用colspan和rowspan属性创建一个复杂的表格布局。
  • 资源：MDN Web Docs - HTML Tables

通过不断练习和探索，你将能够熟练运用HTML表格，并在实际项目中灵活应用。