HTML的table标签怎么用？如何合并单元格？
在网页开发中，展示结构化数据（如成绩单、财务报表、产品列表等）时，HTML表格是最常用的工具之一。本文将详细讲解<table>标签的基础用法，并重点解析如何进行单元格的合并。
一、HTML表格的基础结构
一个标准的HTML表格由以下几个核心标签组成：
<table>：定义整个表格的容器。
<tr>：定义表格的行。
<th>：定义表头单元格，默认加粗且居中显示。
<td>：定义标准单元格，默认左对齐。
下面是一个最基础的2行2列的表格代码：
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table>
注意：这里的border="1"是为了让表格边框可见，在实际开发中，表格的样式通常由CSS来控制，推荐使用<style>标签或外部CSS文件来美化表格。
二、如何合并单元格
在复杂的数据展示中，我们经常需要合并单元格。合并单元格主要依靠两个属性来实现：
colspan：跨列合并（横向合并），即合并同一行上的多个单元格。
rowspan：跨行合并（纵向合并），即合并同一列上的多个单元格。
1. 跨列合并（colspan）
当我们需要把同一行的多个列合并成一个时，在<th>或<td>标签中添加colspan属性，并设置要合并的列数。
示例：将表头的两列合并为一列。
<table border="1"> <tr> <th colspan="2">个人信息（跨列合并）</th> </tr> <tr> <td>张三</td> <td>25岁</td> </tr> </table>
关键点：第一行原本需要两个<th>，但因为合并了2列，所以只需要写一个<th>，被合并的那个位置不需要再写标签。
2. 跨行合并（rowspan）
当我们需要把同一列的多个行合并成一个时，在<th>或<td>标签中添加rowspan属性，并设置要合并的行数。
示例：将第一列的两个单元格纵向合并。
<table border="1"> <tr> <td rowspan="2">技术部（跨行合并）</td> <td>张三</td> </tr> <tr> <td>李四</td> </tr> </table>
关键点：第一个<td>设置了rowspan="2"，表示它向下占据了2行的位置。因此在第二个<tr>中，只需要写第二个<td>（李四），不需要再写第一个<td>，否则会导致表格错位。
三、综合实战：同时使用跨列与跨行
在实际应用中，我们经常会遇到需要同时使用colspan和rowspan的复杂表格。下面是一个综合示例：
<table border="1" style="width: 300px; text-align: center;"> <tr> <th colspan="3">学生成绩表</th> </tr> <tr> <td rowspan="2">一班</td> <td>语文</td> <td>90</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">二班</td> <td>语文</td> <td>85</td> </tr> <tr> <td>数学</td> <td>88</td> </tr> </table>
四、合并单元格的避坑指南
删除多余的单元格：这是初学者最容易犯的错误。使用了
colspan或rowspan后，必须将代码中被合并掉的那些<td>或<th>标签删除，否则表格会变形溢出。画图辅助：在编写复杂的合并表格前，建议先在纸上或画图软件中画出表格的网格，标好每个单元格的
rowspan和colspan数值，然后再对应写代码，这样逻辑会清晰很多。结构化标签：为了代码更具语义化，建议在表格中使用
<thead>（表头区域）、<tbody>（表体区域）和<tfoot>（表尾区域）来划分表格结构。
掌握colspan和rowspan的原理，多加练习，你就能轻松应对网页中各种复杂的表格排版需求。如果您想在线测试这些代码效果，可以访问 www.ipipp.com 获取更多实战演示。