介绍
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 表格将有助于你创建更美观、易于导航的网页。