直接替换标签会崩样式和读屏，因其语义化需真实表达数据结构：用做布局或删均破坏ARIA解析，必须补全且顺序正确，scope属性不可省略。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
为什么直接替换 <table> 标签会崩样式和读屏？
<p>因为语义化不是“把 <code><div> 换成 <code><table>”，而是让标签真正表达数据结构。老旧项目里常见两种错误：一是用 <code><table> 做布局（比如整页套三层嵌套 table），二是删掉 <code><thead><code><tbody> 只留 <code><tr><td>。前者会让屏幕阅读器误判为数据表，后者会让 NVDA、VoiceOver 无法识别列头——首行被当成普通数据读，排序箭头、分页栏全失效。
<h3><code><thead> 和 <code><tbody> 必须补全，且顺序不能错
<p>它们不是可选装饰，是 DOM 解析器识别表格范围的硬性依据：</p>
<ul><li>
<code><caption></caption> 必须紧贴 <table> 开头，不能放 <code><div> 里
<li><code><thead> 只能有一个，且必须在 <code><tbody> 之前；<code><tbody> 可以有多个（适合分页加载）
<li>动态插入新行时，如果没 <code><tbody>，部分辅助技术会跳过整块新增内容
<li>示例正确结构：<pre class="brush:php;toolbar:false;"><table>
<caption>用户管理列表</caption>
<thead><tr><th scope="col">用户名</th><th scope="col">状态</th></tr></thead>
<tbody><tr><td>alice</td><td>启用</td></tr></tbody>
</table></pre></li>
<h3>哪些表格该保留原生 <code><table>，哪些该砍掉？
<p>关键看内容本质，不是看“长得像不像”：</p>
<ul><li>真实二维数据表（价格对比、参数清单、后台数据列表）——必须用 <code><table> + <code><thead> + <code><th scope="col">，别手痒改成 flex
<li>纯视觉对齐的三栏介绍、卡片网格、图标排版——这不是表格，该用 <code><ul></ul> 或 CSS Grid，强行套 <table> 反而破坏语义
<li>旧代码里 <code><table class="layout"> 这种带布局意图的，优先抽离 CSS 到 <code>legacy-table.css，再逐步替换成 <main></main> + <section></section> 结构
div + display: table 模拟的“伪表格”，DOM 层面仍是 div，ARIA 再全也骗不过屏幕阅读器解析器
scope 属性漏写，<th> 就等于没写
<p><code><th> 不加 <code>scope，等于告诉辅助技术：“这只是一个加粗居中的 <td>”。必须按行列关系显式声明：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code>scope="col"：用于列头（如“姓名”“邮箱”“操作”）
scope="row"：用于行首标识（如“用户A”“用户B”，常出现在第一列）<thead>，不能靠 <code>colspan/rowspan 硬撑
<th>操作</th> → 正确写法：<th scope="col">操作</th>
最易忽略的是：排序图标用 ::after 插入，但 scope 漏加，导致“点击升序”对读屏用户完全不可见——它只看到“操作”，看不到“当前按操作列降序”。
