colspan属性用于让表格单元格横向跨列合并，需在<td>或<th>标签内设置colspan="N"（N为≥1的整数），浏览器自动扩展宽度并跳过后续N−1个单元格，使用时须确保同行其余单元格数量匹配以避免布局错乱。
colspan 属性用于让一个表格单元格（<td> 或 <th>）横向跨越多个列，从而实现跨列合并。
colspan 的基本用法
在 <td> 或 <th> 标签中添加 colspan="N"，其中 N 是要合并的列数（正整数）。浏览器会自动将该单元格宽度扩展为 N 列，并跳过后续 N−1 个单元格的渲染位置。
- 必须写在单元格标签内，不能放在
<tr>或<table>上 - 数值需为整数且 ≥1；设为 1 等同于默认行为，可省略
- 使用后，该行中后续对应数量的单元格应被省略，否则会导致布局错乱或语义错误
简单示例：合并两列
以下代码创建一个三列宽的表格，第一行第一个单元格跨占前两列：
<table border="1">
<tr>
<td colspan="2">跨两列</td>
<td>第三列</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
结果是：第一行只有两个“视觉单元格”（一个宽的、一个窄的），第二行正常显示三列。
立即学习“前端免费学习笔记（深入）”；
配合表头与结构对齐
若在表头（<th>）中使用 colspan，需注意列总数仍需保持一致。例如，想让标题覆盖前两列，同时下方数据分三列显示，可这样安排：
- 第一行：
<th colspan="2">姓名信息</th><th>年龄</th>→ 共计 3 列 - 第二行：
<td>姓</td><td>名</td><td>25</td>→ 同样 3 列，逻辑对齐
这种写法既清晰又符合 HTML 表格的列模型，避免因 colspan 导致列数计算混乱。
常见误区与注意事项
容易出错的地方包括：
- 写了
colspan="3"却还在同一行写了另外 3 个<td>，导致实际列数超出预期，表格变形 - 在嵌套表格或复杂布局中滥用 colspan，使可访问性下降（屏幕阅读器可能难以正确解析）
- 忘记调整 CSS 边框或 padding，使合并后的单元格看起来与其他格子不协调
建议搭配 border-collapse: collapse 和统一的 padding 使用，提升视觉一致性。
