真正需要重构的是承载二维关系型数据但HTML结构混乱的老表格；判断标准为th是否仅在thead中、tbody是否只包数据行、td内有无div等布局元素。
先确认是不是真要重构表格
很多“表格太乱”的问题，其实不是结构问题，而是渲染或语义误用。比如：table里塞了按钮、表单、卡片布局，或者用colspan/rowspan强行拼凑视觉对齐——这已经超出表格语义范畴，该换grid或flex，不是重构表格。
真正需要重构的，是那些仍承载二维关系型数据（如课程表、销售明细、参数对照）但 HTML 结构混乱的老表格。判断标准就一条：th是否只出现在表头行、thead是否包裹所有列标题、tbody是否只包数据行、有没有div嵌在td里撑高单元格。
- 有
div或span在td里做布局 → 优先抽离样式，改用padding/vertical-align - 靠
align="center"或valign="top"控制对齐 → 全部删掉，CSS 统一管 - 多个
table嵌套实现“分组” → 改用tbody分段 +caption或thead重复标题
用 DOM 层级反推语义结构
打开浏览器开发者工具，把焦点放在table节点上，逐层看子节点类型和数量。一个干净的表格 DOM 应该像这样：table → caption（可选）→ colgroup（可选）→ thead → tr → th × N → tbody → tr × M → td × N。如果中间插了div、br、font，或者tr下直接是td没包tbody，就是语义断裂点。
-
colgroup不是摆设：它能统一列宽、背景、对齐，比每个td写style更轻量，也利于响应式控制 - 没有
thead的表格，th只是“加粗的td”，屏幕阅读器不会识别为表头；必须补全 - 多级表头（如“销售额”下分“线上”“线下”）要用
th嵌套div不行，得用colgroup+col配合scope属性或rowspan/colspan精确声明归属
老表格内联样式怎么安全剥离
直接全局删style属性会崩样式，但逐个改又太慢。最稳的路径是：先提取高频内联样式，映射成 class，再批量替换。比如style="color:#f00; font-weight:bold" → 提炼为class="text-error fw-bold"，然后用正则或脚本扫一遍：
sed -i 's/style="color: #f00; font-weight: bold"/class="text-error fw-bold"/g' *.html
注意几个坑：
- 别碰
style="width: 100%"这类影响布局的关键内联样式，先用colgroup接管列宽逻辑 -
border="1"这种旧属性必须删，它会覆盖border-collapse: collapse，导致边框双线 - 含
!important的内联样式，说明原有 CSS 优先级已失控，得先理清样式来源链，而不是硬覆盖
复杂层级表格的折叠与展开怎么不破坏语义
所谓“可折叠的表格”，不是靠 JS 显隐tr，而是用details/summary包裹tbody，或者用aria-expanded+role="rowgroup"增强可访问性。例如：
<details><summary>Q3 销售明细</summary><tbody><tr> <td>华东</td> <td>¥245,000</td> </tr></tbody></details>
这样既保留 DOM 层级，又让辅助技术知道这是可交互分组。JS 控制时，只改open属性，不要移除/插入节点——否则getSelection()定位会失效，光标乱跳。
最容易被忽略的是：折叠状态必须同步到 URL hash 或 localStorage，否则用户刷新页面就回到全部展开，体验断层。别依赖纯 CSS 的:has()做折叠，Safari 15.4 前不支持，且无法触发transition动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
