HTML表格重构不是重写代码，而是用语义正确、结构清晰、可访问、易维护的方式重组：必须使用，配齐，带scope属性，不可省略。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接说结论：HTML表格重构不是“重写代码”，而是把视觉上像表格的数据，用语义正确、结构清晰、可访问、易维护的方式重新组织——<table> 该用还得用，但必须配齐 <code><thead>、<code><tbody>，<code><th> 要带 <code>scope，<caption></caption> 别省。
为什么不用 div 模拟表格？
很多新手看到“重构”第一反应是删掉 <table>，改用 <code><div> + CSS Grid/Flex 去“画格子”。这在纯展示场景看似灵活，但实际踩坑密集：
<ul>
<li>屏幕阅读器无法识别行列关系，视障用户只能线性读取，失去数据对比能力</li>
<li>打印时无法自动分页保留表头（<code><thead> 在每页顶部重复，<code><div> 做不到）
<li>排序、导出 Excel、服务端渲染表格数据等下游操作全部断裂</li>
<li>CSS 写到后期会比原生表格更难维护（比如合并单元格的逻辑要手动计算 grid-area）</li>
<h3>重构前先检查这 4 个硬伤</h3>
<p>真正需要重构的表格，往往不是结构错，而是语义漏。打开浏览器开发者工具，快速扫一遍：</p>
<ul><li>有没有 <code><thead>？没有就补上，哪怕只有一行表头
<li><code><th> 是否全在 <code><thead> 或 <code><tr> 开头？如果数据行里混着 <code><th>（比如首列用 <code><th scope="row">），那是对的；但如果只是为加粗而用 <code><th>，得换回 <code><td>
<li>每个 <code><th> 是否有 <code>scope 属性？列标题用 scope="col"，行标题用 scope="row"，这是辅助技术定位的关键
<table>？即没包 <code><caption></caption>，也没分 <thead>/<code><tbody> —— 这类表格基本等于“无结构”
<h3>border-collapse: collapse 是刚需，不是可选项</h3>
<p>原始 HTML 表格加 <code>border="1" 后出现双线边框，本质是浏览器默认给单元格留了 cellspacing（已废弃）空间。现代解法只有一条：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
padding: 8px 12px;
}
注意两点：
- 别再用
cellspacing="0"或cellpadding属性，它们已被 HTML5 废弃，CSS 才是唯一可控路径 -
border-collapse: collapse必须作用于<table> 元素本身，设在 <code><td> 上无效 <li>如果表格嵌套或需区分内外边框，可用 <code>border-spacing: 0替代，但兼容性略差（IE 不支持） - 替代思路：复杂合并（如阶梯状表头）优先考虑用
<colgroup></colgroup>+<col>定义列宽和样式，比硬写rowspan更稳定
合并单元格时，rowspan/colspan 的坑比想象中深
rowspan 和 colspan 看似简单，但一动就乱序，尤其跨多行后容易导致后续 <tr> 列数错位：
<ul><li>计算逻辑：一个 <code><td rowspan="3"> 占据当前列的 3 行，那么它下方两行的同一列位置必须留空（不放 <code><td>），否则表格会“撑开”或错列
<li>调试技巧：在开发者工具里逐行展开 <code><tr>，看每行 <code><td> 数量是否一致（含被 <code>rowspan 覆盖的隐式占位）
最常被忽略的是：合并后的单元格仍需保持语义——如果是表头合并，用 <th rowspan="2" scope="col">；如果是数据合并，必须是 <code><td rowspan="2">，混用会导致辅助技术误读。</td>
