HTML表格重构是将语义错误的结构改为语义正确、可维护、可访问的结构，关键在正确使用（含scope属性）、/及合理处理colspan/rowspan。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接说结论：HTML表格重构不是重写 markup，而是把“能用但错的结构”换成“语义正确、可维护、可访问”的结构。多数人卡在 <th> 乱用、<code><thead>/</thead>
<tbody> 缺失、合并单元格破坏行列逻辑这三处。
<h3>为什么 <code><th> 不能全替换成 <code><td>？
<p>视觉上加粗居中只是表象，真正影响的是屏幕阅读器解析逻辑和 CSS 选择器精度。比如一个没用 <code><th> 的表头行，<code>th:first-child 就完全失效；更严重的是，辅助技术会把整行当数据行读，用户根本不知道这是列名。
- 必须用
<th> 标注所有列标题（<code>scope="col"可显式声明） - 首列是“行标识”时（如“张三”“李四”），该单元格也应为
<th scope="row"> <li><code><th> 只能出现在 <code><tr> 内，且同一行里 <code><th> 和 <code><td> 混用是允许的——但要确保语义对齐 <h3><code><thead>、<code><tbody> 不是可选项 <p>它们不是为了“好看”或“方便写 CSS”，而是让浏览器和 JS 能精准操作不同区块。没有 <code><tbody>，你用 <code>document.querySelector('table tbody')就拿不到任何内容；没有<thead>，固定表头滚动时 JS 无法分离渲染。 <ul><li> <code><caption></caption>必须放在<table> 最顶层，且只能有一个 <li><code><thead> 应只包含一行或多行表头 <code><tr>，别塞数据 <li><code><tbody> 是数据主体，分页加载时只需清空并重写它，<code><thead> 和 <code><tfoot> 保持不动 <h3> <code>colspan和rowspan怎么不搞乱行列数？错误用法是边写边数“我这里跨了2列，下一行就少写2个
<td>”——这会让后续 JS 计算列宽、导出 CSV、甚至键盘导航全部错位。正确做法是：先按最大列数画格子，再用 <code>colspan/rowspan合并，其余位置补空<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><tr>，看 Elements 面板里子元素个数是否等于表格总列数（含合并后“消失”的列） <li>避免嵌套合并：比如一个 <code><td rowspan="2" colspan="2"> 里再放表格，会彻底破坏父表结构 <li>动态生成时，优先用 JS 算好每行实际 <code><td> 数量再拼接字符串，别靠模板引擎自动补 <p>最常被忽略的点是：重构完表格，必须手动测试键盘 Tab 导航顺序是否仍按行列自然流动，以及用 Chrome 的 Lighthouse 跑一次「Accessibility」审计——很多“结构正确”的表格，因为少了 <code>scope或aria-label，依然会被标为高风险。这不是锦上添花，是上线前必过的一关。
