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