直接替换标签会崩样式和读屏，因其语义化需真实表达数据结构：用做布局或删均破坏ARIA解析，必须补全且顺序正确，scope属性不可省略。

为什么直接替换 标签会崩样式和读屏？

因为语义化不是“把

换成

”，而是让标签真正表达数据结构。老旧项目里常见两种错误：一是用 做布局（比如整页套三层嵌套 table），二是删掉 只留 和 必须补全，且顺序不能错

它们不是可选装饰，是 DOM 解析器识别表格范围的硬性依据：

必须紧贴

。前者会让屏幕阅读器误判为数据表，后者会让 NVDA、VoiceOver 无法识别列头——首行被当成普通数据读，排序箭头、分页栏全失效。

开头，不能放

里

只能有一个，且必须在 之前； 可以有多个（适合分页加载）

动态插入新行时，如果没

，部分辅助技术会跳过整块新增内容

示例正确结构：

用户管理列表

用户名	状态
alice	启用

哪些表格该保留原生 ，哪些该砍掉？

关键看内容本质，不是看“长得像不像”：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 真实二维数据表（价格对比、参数清单、后台数据列表）——必须用

+ +

，别手痒改成 flex

纯视觉对齐的三栏介绍、卡片网格、图标排版——这不是表格，该用

或 CSS Grid，强行套 反而破坏语义

旧代码里

这种带布局意图的，优先抽离 CSS 到 legacy-table.css，再逐步替换成

+

结构

用 div + display: table 模拟的“伪表格”，DOM 层面仍是 div，ARIA 再全也骗不过屏幕阅读器解析器

scope 属性漏写，

，不能靠 colspan/rowspan 硬撑

错误写法：

→ 正确写法：

最易忽略的是：排序图标用 ::after 插入，但 scope 漏加，导致“点击升序”对读屏用户完全不可见——它只看到“操作”，看不到“当前按操作列降序”。

就等于没写	不加 scope，等于告诉辅助技术：“这只是一个加粗居中的	”。必须按行列关系显式声明： scope="col"：用于列头（如“姓名”“邮箱”“操作”） scope="row"：用于行首标识（如“用户A”“用户B”，常出现在第一列） 多级表头需嵌套
操作	操作