标签不适合展示流程图，因其二维网格结构无法表达非线性关系，导致语义错乱、维护困难、响应式失效，且可访问性与渲染精度严重不足。
直接说结论：<table> 标签不适合展示流程图，强行用它嵌套实现，会迅速失控、语义错乱、维护困难，且几乎无法响应式适配。<h3>为什么 table 嵌套画流程图必出问题</h3>
<p>流程图本质是带方向、带分支、带层级关系的非线性结构；而 <code><table> 是严格二维网格，只支持行列对齐与合并。一旦出现“从第2行某列指向第4行另一列”的箭头逻辑，<code>rowspan/colspan 就会互相干扰——比如一个 rowspan="3" 占了三行，下一行再想横跨两列，位置就偏移了。
- 浏览器自动修正 DOM：在
<tr> 里误放 <code><table>，会被踢到表外，JS 查不到节点，CSS 选不到目标<li>箭头只能靠图片或绝对定位硬塞，脱离表格结构后，缩放/打印/高对比度模式全部失效</li> <li>每个“节点”塞进 <code><td> 后，屏幕阅读器会把它读成“第3行第2列的数据单元格”，而非“开始节点”或“判断分支”<li>修改一个连接关系，往往要重算整行 <code>colspan、调整多层嵌套子表的width和cellpadding - 用单层
<table> + <code>colspan/rowspan拆出大致区域，例如：<td colspan="2">条件判断</td>占两列，下方两个<td> 分别放“是”和“否”分支<li>禁用所有嵌套 <code><table>：每个流程节点只允许一个 <code><div> 或纯文本，不要在 <code><td> 里再套表格<li>箭头统一用 <code><img src="arrow-right.png">或 CSS border 模拟，且固定尺寸（如width: 16px），避免被表格重排拉伸变形 - 给每个关键
<td> 加 <code>aria-label，例如<td aria-label="开始节点">START</td>，补一点可访问性 - 写之前先画坐标草图：标出 (0,0) 到 (n,m)，确认每个
rowspan/colspan起点是否落在空单元格上 - 静态图：导出 SVG 直接嵌入 HTML，用
<svg></svg>+<path></path>精确控制连线与节点，缩放不失真 - 动态交互：用 Mermaid（
mermaid.initialize()）或 PlantUML，写文本描述（如graph TD; A[开始] -- 是 --> B[执行]），由 JS 渲染成 SVG - 编辑能力：集成 bpmn-js 或 draw.io 的轻量版，用户拖拽生成，输出标准 BPMN XML
- 极简需求：用
display: flex或display: grid排节点，CSS::before/::after画直线箭头，完全脱离表格语义
如果已有老系统强制要求用 table 实现，怎么少踩坑
仅限无法升级、无 JS 支持、必须兼容 IE8 的极端场景。核心原则：放弃“画图”，只做“节点定位”。
真正该用什么替代 table 展示流程图
现代方案不是“怎么嵌套更巧”，而是换掉底层模型：
最容易被忽略的一点：流程图里那个“菱形判断框”，在 <td> 里加 <code>border-radius 并不能让它变成菱形——它只是个圆角矩形，视觉欺骗而已；真正的菱形需要 transform 或 SVG path。这恰恰说明，当表现形式开始倒逼结构妥协时，就该换工具了。
