结论：用 colspan 属性，即在 或 中写 colspan="n"；其本质是删除右侧 n-1 个单元格，需确保每行展开后列数一致，否则错位；对齐须单独设 css，table-layout: fixed 下宽度由所跨各列宽度和决定。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

直接说结论：用 colspan 属性，不是加样式、不是套 div、不是改 display，就是往 <td> 或 <code><th> 里写 <code>colspan="n"。 但写错一行，整张表就错位——这不是浏览器 bug，是你没算清“这一行到底占几列”。

colspan 的本质是删单元格，不是拉宽

colspan="2" 的意思是：“我这个单元格要占用当前列 + 它右边 1 列”，也就是物理上删掉右侧 1 个 <td>。浏览器不会帮你跳过、隐藏或忽略后续单元格。 <ul><li>如果整行该有 4 列，你在第一个 <code><td colspan="3"> 后又写了 <code><td>B</td>，那这行实际占了 4 列（3+1），没问题

但如果后面还写了 <td>C</td>，就变成 5 列（3+1+1）→ 下一行立刻错位，且开发者工具里看不出报错

colspan="0" 无效，colspan="1" 可省略（默认就是 1）

怎么验证每行列数是否一致？

别靠肉眼数 <td> 标签个数。打开浏览器控制台，选中任意 <code><tr>，运行： <pre class="brush:php;toolbar:false;">Array.from(tr.children).reduce((sum, el) =&gt; sum + (el.colSpan || 1), 0)</pre> <p>结果必须等于表头行展开后的总列数（比如 <code><thead> 第一行有 3 个 <code><th>，其中一个是 <code>colspan="2"，那总数就是 2 + 1 = 3）。

• 所有 <tr>（包括 <code><thead>、<code><tbody>、<code><tfoot>）都得过这一关 <li>特别注意：<code><thead> 用了 <code>colspan，<tbody> 的每行也得按“展开后列数”来写，不能只看 <code><thead> 里写了几个 <code><th> <h3>右侧对齐、居中、垂直居中怎么配？</h3> <p><code>colspan 只管跨列，对齐必须单独设——而且不能设在 <tr> 或 <code><table> 上，它不继承。 <ul> <li>水平居中：<code><td colspan="2" style="text-align: center">aaa</td>
• 右侧对齐：<td colspan="2" style="text-align: right">aaa</td>
• 垂直居中：vertical-align: middle 有效，但需配合 line-height 或 padding；设 height 容易截断，建议用 min-height + padding
• 避免用过时的 align="right" 属性，CSS 重置或框架可能让它失效

真正容易被忽略的是：当表格用了 table-layout: fixed（常见于防止内容撑开列宽），colspan 单元格的宽度由它所跨各列的宽度之和决定，不是你写的 width 值。想控制宽度，得先定义 <col> 或第一行的列宽。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！