HTML 表格

介绍

HTML 表格是用于在网页上显示数据的标准元素之一。它定义了二维表数据，包括行和列。本教程将详细讲解如何创建、修改和操作 HTML 表格。

创建表格

要创建一个基本的 HTML 表格，需要使用 <table> 标签。在该标签中，你可以包含多个 <tr> (table row) 标签，每个代表表格中的一行。在每个 <tr> 标签中，你可以包含多个 <td> (table data) 或 <th> (table header) 标签，分别用于定义单元格中的数据和列头。

下面是一个简单的例子：

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

这将创建一个简单的两列表格，包含标题和两行数据。

添加边框

要给表格添加边框，可以使用 border 属性：

<table border="1">
  ...
</table>

这将在单元格之间绘制出一条细线。

合并单元格

有时你可能需要合并表格中的多个单元格。你可以使用 colspan 属性来水平合并单元格，使用 rowspan 属性来垂直合并单元格：

<table border="1">
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>电话：123456789</td>
    <td>邮箱：zhangsan@example.com</td>
  </tr>
  ...
</table>

在这个例子中，"联系方式"单元格将跨越两列。

表格的其他属性和标签

HTML 表格还有其他一些属性和标签可供使用：

• <caption> 标签可以为表格添加标题。
• <thead>, <tbody> 和 <tfoot> 标签可以帮助你将表格分成不同的部分，这有利于屏幕阅读器、搜索引擎优化等方面的工作。
• scope 属性用于指定单元格是应与行还是列关联。

结论

本教程详细介绍了如何使用 HTML 表格来展示数据。我们从基础知识开始，逐步深入学习更高级的主题。掌握 HTML 表格将有助于你创建更美观、易于导航的网页。