html表格中用colspan属性实现横跨多列、rowspan实现竖跨多行，二者均为原生html属性，值必须为纯正整数；可同时使用，但需严格匹配行列总数以避免结构错位。
HTML 表格里怎么让一个单元格横跨多列
用 colspan 属性，直接写在 <td> 或 <code><th> 标签里就行。它不是 CSS，也不是 JS 控制的，是 HTML 原生属性，浏览器一解析就生效。
<p>常见错误是写成 <code>colspan="2px" 或 colspan="two"——必须是纯数字，比如 colspan="2"，否则无效，浏览器会忽略。
注意：如果某行有 4 列，你加了一个 colspan="3" 的单元格，那这行剩下所有单元格加起来必须刚好占 1 列，否则表格结构会错位，尤其在嵌套表格或配合 border-collapse: collapse 时更明显。
示例：
立即学习“前端免费学习笔记（深入）”；
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">成绩</th>
</tr>
<tr>
<td>张三</td>
<td>85</td>
<td>92</td>
</tr>
</table>
HTML 表格里怎么让一个单元格竖跨多行
用 rowspan，规则和 colspan 类似，但方向是垂直的。同样只接受正整数，不能带单位、不能是字符串。
容易踩的坑是：rowspan 会“吃掉”下面行对应位置的单元格。比如第一行 <td rowspan="3">汇总</td>，那第二、第三行的同一列就不能再写 <td>，否则视觉上会重叠或错行——浏览器其实会把它当成新列渲染，表格就乱了。
<p>典型使用场景：左侧固定标签列（如“语文”“数学”）需要对齐多个学生行，或者报表里的分组标题。</p>
<p>示例（正确写法）：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1713" title="Q.AI视频生成工具"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680315554756.png" alt="Q.AI视频生成工具" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1713" title="Q.AI视频生成工具">Q.AI视频生成工具</a>
<p>支持一分钟生成专业级短视频，多种生成方式，AI视频脚本，在线云编辑，画面自由替换，热门配音媲美真人音色，更多强大功能尽在QAI</p>
</div>
<a href="/ai/1713" title="Q.AI视频生成工具" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><table border="1">
<tr>
<th rowspan="3">科目</th>
<th>张三</th>
</tr>
<tr>
<td>85</td>
</tr>
<tr>
<td>92</td>
</tr>
</table></pre>
<h3>colspan 和 rowspan 能一起用吗？有没有顺序要求</h3>
<p>能一起用，没有语法限制，<code>colspan 和 rowspan 可以同时出现在同一个 <td> 上，比如 <code><td colspan="2" rowspan="3">。
<p>但要注意：它们作用的是同一个单元格的“覆盖范围”，不是叠加效果。这个单元格会横跨 2 列、纵跨 3 行，总共占据 2×3=6 个逻辑格子的位置。</p>
<p>关键点在于后续行的单元格数量必须动态减少——比如第一行用了 <code>colspan="2" rowspan="2"，那第二行的 <tr> 里就要少写一个 <code><td>，否则列数对不上，表格渲染会出问题，DevTools 里可能看到黄色警告，但不会报错。
<p>兼容性完全没问题，所有浏览器从 IE6 开始就支持，不用考虑降级。</p>
<h3>合并单元格后样式对不齐、边框断开怎么办</h3>
<p>这不是 <code>colspan/rowspan 本身的问题，而是 CSS 边框模型和表格渲染机制导致的。最常见的是 border-collapse: separate（默认）下，合并单元格的边框和其他单元格的边框不共享，看起来像断开了。
解决方法只有两个：
- 强制用
border-collapse: collapse，这是最干净的方案 - 手动给合并单元格加
border，并确保相邻单元格的border颜色/宽度一致（但不如第一种可靠）
另一个隐形问题是：如果合并单元格里内容太多，又没设 white-space: normal 或 max-width，它可能把整行撑宽，影响其他列对齐。建议配合 table-layout: fixed + 显式设置列宽来稳住布局。
最后提醒一句：合并单元格会让表格语义变弱，屏幕阅读器可能读不准行列关系。如果数据要被辅助技术访问，优先考虑用 CSS Grid 或语义化结构替代，而不是硬靠 rowspan 做视觉分组。
