HTML合并列单元格？超简单！一看就会的表格排版小技巧

做网页表格时，经常遇到需要把几个列“粘”在一起的情况——比如表头里的“联系方式”要涵盖电话和邮箱两列，或者数据行里某个内容要跨两列显示。这时候，你只需要一个神奇属性，就能轻松搞定！今天就教你用colspan这个“表格胶水”，5分钟学会合并列单元格～

核心武器：colspan属性了解一下

合并列的关键就是colspan，它的中文意思是“跨列”，作用就像给单元格贴了一张“我要占X列位置”的标签。比如colspan=”2″表示这个单元格要占据2列的宽度，相当于把相邻的两个单元格合并成一个大的。

实战三步走：合并列表格轻松写

拿一个学生信息表举例，我们要把表头的“电话”和“邮箱”合并成“联系方式”列，看具体步骤：

第一步：写基础表格框架

先写出没有合并的表格结构，包含姓名、性别、电话、邮箱四个表头：

<table border=”1″>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>电话</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>男</td>
    <td>138XXXX1234</td>
    <td>xiaoming@xxx.com</td>
  </tr>
</table>

第二步：给目标单元格加colspan

找到要合并的表头单元格，把原来的“电话”和“邮箱”两个th换成一个th，并加上colspan=”2″属性：

<th colspan=”2″>联系方式</th>

第三步：删除多余的单元格

合并后，该行的单元格总数要减少（colspan值-1）个。比如这里colspan=2，所以要删掉原来的<th>邮箱</th>，调整后的表头行如下：

<tr>
  <th>姓名</th>
  <th>性别</th>
  <th colspan=”2″>联系方式</th>
</tr>

常见坑点要避开

• 坑点1：合并后忘记删多余单元格——比如合并2列却保留2个td，导致表格错位。记住：colspan=X，该行要少写（X-1）个单元格。
• 坑点2：colspan值写错——比如要合并3列写成colspan=”2″，结果占不满，表格变乱。
• 坑点3：混淆合并列和行——合并列用colspan，合并行用rowspan，别搞反啦！

这样，一个带合并列的表格就完成啦！是不是超简单？下次做表格遇到合并列，直接用colspan，轻松搞定～