rowspan属性必须写在或标签内且值为正整数，跨行后对应列后续行需跳过单元格；动态渲染时须预统计行数再分配，避免与colspan混用导致错位。

rowspan 属性必须写在 <td> 或 <code><th> 标签里 <p>不是写在 <code><tr> 或 <code><table> 上，也不是通过 CSS 控制。浏览器只认 <code>rowspan 出现在单元格标签内部这个位置。

常见错误是把 rowspan 放到 <tr> 上，比如 <code><tr rowspan="2">，这完全无效，解析时会被忽略。 <ul> <li> <code>rowspan 值必须是正整数（如 "2"、"5"），不能是 "0" 以外的非数字字符串

值为 "0" 是合法但特殊：表示跨到当前 <tbody> / <code><thead> 末尾，但兼容性有限，不建议生产环境用 <li>属性值必须加引号，<code>rowspan=2 在 HTML5 中虽可能被容错，但易引发解析歧义，统一写 rowspan="2"

跨行后，后续行对应列必须跳过或留空

假设 <td rowspan="3">A</td> 出现在第 1 行第 1 列，那么第 2 行和第 3 行的第 1 列位置不能再出现 <td> 或 <code><th> —— 否则表格结构会错乱，浏览器可能自动补全或渲染错位。 <p>实际编码中容易漏掉这点，尤其动态生成表格时：</p> <ul> <li>如果该列本应有内容，得提前挪进跨行单元格内部，而不是保留在原行</li> <li>如果该列原本为空，第 2、3 行对应位置建议显式写 <code><td></td> 占位（虽然可省略，但缺位易导致列宽塌缩或样式错乱）

检查每行 <td> 总数是否一致 —— 跨行不会减少总列数，只是“视觉上”合并了 <h3>React/Vue 等框架中动态计算 <code>rowspan 容易出错

直接遍历数据并靠索引判断“是不是第一行”来决定是否加 rowspan，大概率失败。因为分组逻辑和 DOM 结构不匹配，容易多加、少加或值算错。

正确做法是预统计：

• 先用 reduce 扫一遍原始数据，生成 numRowsByLabel = { 'Category A': 3, 'Category B': 1 }
• 渲染时，对每个分组标签，只在它对应的第一条数据行里输出带 rowspan={numRowsByLabel[label]} 的 <td> <li>同组后续行中，该列直接不渲染任何 <code><td>，而非渲染一个空 <code><td> 再设 <code>rowspan="1"

  漏掉预统计这步，rowspan 值就只能硬编码，一改数据结构就得手动调，不可维护。

  

  Article To Html

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

  下载

  rowspan 和 colspan 混用时列对齐极易崩

  当同一行既有 colspan 又有 rowspan，或者跨行单元格下方还存在跨列单元格时，浏览器计算列偏移容易出错，表现为右侧列整体右移、边框断裂、文字挤在一起。

  调试这类问题最有效的方式是：

  • 打开浏览器开发者工具，选中表格，看 Elements 面板里每行的 <td> 是否按预期数量和顺序排列 <li>临时给所有 <code><td> 加 <code>border="1"，肉眼确认是否“少了一格”或“多了一格”
  • 避免在跨行单元格所在列的下方再设 colspan；如有必要，优先用嵌套表格或 CSS Grid 替代

  rowspan 看似简单，但真正稳定用好，关键不在怎么写，而在怎么让后续行“配合它不抢位置”。这点最容易被忽略，也最难 debug。