HTML 表格跨列属性怎么设置才能合并单元格-H5教程-PHP中文网

colspan属性需写为colspan="n"（n为正整数），合并单元格时须确保每行单元格colspan值之和等于设计总列数，否则表格错位；table-layout: fixed下宽度由首行或定义。

html 表格跨列属性怎么设置才能合并单元格

直接在 `` 或 ` ` 标签里写 `colspan="N"`，N 是你要合并的列数（正整数），比如 `colspan="2"` 就让这个单元格横跨两列。关键不是“加宽”，而是它会自动占掉右边 N−1 个位置，后面那几个单元格就得省掉，否则表格就错位了。

必须是纯数字字符串，写成 colspan="2" 才行；colspan=2（不加引号）浏览器也能认，但建议统一加双引号；以下写法全无效：

每行“真实列数”要一致：把这一行所有单元格的 colspan 值（没写就是 1）加起来，结果必须等于你设计的总列数。例如表头有 4 列，那每一行加起来都得是 4。

写 <td colspan="3">A</td> <td>B</td> → 3 + 1 = 4 ✔️
写 <td colspan="3">A</td> <td>B</td> <td>C</td> → 3 + 1 + 1 = 5 ✘ 错位
<thead> 用了 <code>colspan，<tbody> 的每一行也得按展开后的列数来写，不能只看 <code><th> 有几个 <h3>常见使用场景示例</h3> <p>比如三列表格中，想让某一行前两列合并、第三列独立显示：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>第一行：<code><th>姓名</th> <th>年龄</th> <th>城市</th>
关键行：<td colspan="2">张三 & 李四</td> <td>北京</td>

这样视觉上就是左宽右窄两个单元格，结构也完全合规。