必须显式写出thead和tbody，th需带scope属性，禁用border/cellspacing/cellpadding等过时属性，rowspan/colspan须严格匹配逻辑，否则导致可访问性、打印、JS操作及CSS失效。
直接重构 HTML 表格时，不加语义分组、不校验嵌套、忽略可访问性属性，大概率会产出一个“能看但不该上线”的表格——它可能在 Chrome 里渲染正常，但在屏幕阅读器中读不出列关系，打印时表头丢失，JS 操作时
查不到，CSS 固定表头也失效。必须显式写出 thead、tbody，不能省略
浏览器虽会自动补全缺失的 thead 或 tbody，但这是解析兜底行为，不是语义保障。省略后会导致：
-
tbody缺失 → JavaScript 用table.querySelector('tbody')返回null，排序/分页逻辑崩； - 打印预览时，多数浏览器只重复
thead（如有），没写就只打一次表头； - CSS 中
tbody { max-height: 400px; overflow-y: auto; }完全无效； - 辅助技术无法区分“标题行”和“数据行”，
th单独存在但无上下文，scope属性失去锚点。
正确结构只有这一种基础范式：
<table>
<thead>
<tr><th scope="col">姓名</th><th scope="col">部门</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>前端</td></tr>
</tbody>
</table>
th 必须带 scope 属性，不能只靠位置猜含义
仅用 <th>姓名</th> 是弱语义：屏幕阅读器不知道这个表头管的是“列”还是“行”，尤其在有横向滚动或复杂合并的表格里极易误读。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
scope="col"：明确声明该th是列标题（绝大多数表头场景）； -
scope="row"：用于首列作为行标题（如“2023年Q1”、“产品A”这类左侧行标签）； - 不要混用
scope和headers：后者需手动绑定 ID 引用，维护成本高，scope足够覆盖 95% 场景； - 如果用了
rowspan/colspan合并表头，scope仍要按实际管辖范围设置，不能因为跨了两列就删掉。
避免用 border 属性或 cellspacing/cellpadding
这些是 HTML4 遗留属性，现代重构中继续使用等于主动放弃样式控制权和响应式能力：
-
border="1"会强制所有单元格带边框，无法单独控制表头/数据/外框； -
cellspacing="0"在不同浏览器渲染不一致，且无法与 CSSborder-collapse共存； -
cellpadding被td, th { padding: 8px 12px; }完全替代，后者支持媒体查询适配移动端； - 真正需要“无间隙”效果时，必须用
table { border-collapse: collapse; }，否则默认separate会留白。
合并单元格时，rowspan/colspan 数值必须严格匹配逻辑
常见错误是只改一个单元格的 rowspan="2"，却忘了删掉下一行对应位置的 td，导致表格错行、列数对不上、JS 获取 row.cells.length 失败。
- 横向合并：
<td colspan="3">汇总</td>→ 后面两列的td必须删掉； - 纵向合并：
<td rowspan="2">部门A</td>→ 下一行同一列位置不能再出现td； - 检查工具：用浏览器开发者工具选中
table，看 Elements 面板里每行tr的子元素数量是否一致（th和td都算）； - 复杂合并建议先画草图，标出每个单元格的行列坐标，再填
rowspan/colspan，比边写边试快得多。
重构表格最常被跳过的环节，其实是验证它在「没有 CSS」时是否仍能被线性阅读器正确朗读——那才是语义是否成立的终极检验。别只盯着视觉对齐，先让结构自己站稳。
