必须显式写出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属性失去锚点。
正确结构只有这一种基础范式：
| 姓名 | 部门 |
|---|---|
| 张三 | 前端 |
th 必须带 scope 属性，不能只靠位置猜含义
仅用 姓名
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必须删掉； - 纵向合并：
部门A td； - 检查工具：用浏览器开发者工具选中
table，看 Elements 面板里每行tr的子元素数量是否一致（th和td都算）； - 复杂合并建议先画草图，标出每个单元格的行列坐标，再填
rowspan/colspan，比边写边试快得多。
重构表格最常被跳过的环节，其实是验证它在「没有 CSS」时是否仍能被线性阅读器正确朗读——那才是语义是否成立的终极检验。别只盯着视觉对齐，先让结构自己站稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
