必须删除纯布局用的<table>，保留并完善语义化表格结构：用开发者工具识别无<th>/<thead>/数据行的表格；表单改用flex布局+语义化标签；真数据表格须补全<thead><tbody><caption>及scope属性。
旧系统里堆着大量靠 <table> 做布局的表单和表格，不是“能不能改”，而是“不改迟早出事”——语义混乱、维护成本高、响应式失效、屏幕阅读器报错。直接删+换是最有效路径。
怎么识别哪些 <table> 必须删掉
别猜，用开发者工具直接定位：
- 搜索
<table>，逐个点开看：里面有没有<th>？有没有<thead>？有没有真实数据行？全都没有 → 纯布局用 → 删 - 检查父级是否用了
display: grid或display: flex——如果父容器已经用现代布局了，那里面的<table>就是历史包袱 - 右键“检查元素”，看 computed 样式里有没有
border、padding、width来自 table 相关属性（如cellspacing）——有，说明它还在参与样式计算，得先解耦再删 - 特别注意嵌套三层以上的
<table><tr><td><table><tr><td>...——这种几乎 100% 是旧编辑器生成的冗余结构
表单里的 <table> 怎么安全替换成 <div> + CSS
表单不用表格也能对齐，关键是保留视觉和功能一致性：
- 把原
<table class="form-table"><tr><td class="label">用户名</td><td class="input"><input></td></tr>整块替换成<div class="form-row"><label class="form-label">用户名</label><div class="form-control"><input></div></div> - CSS 用
display: flex对齐：.form-row { display: flex; align-items: center; gap: 0.5rem; }，比table-cell更可控 - 别漏掉
<label>的for属性和id关联——这是可访问性的底线，删了<td>不能删这个 - 如果有必填星号（
*），别塞在<label>文本里，用::after伪元素加，避免被读屏软件误读为内容
保留的表格必须加哪些语义标签
不是所有 <table> 都该删——真展示二维数据的要留，但必须补全语义结构：
立即学习“前端免费学习笔记（深入）”；
- 必须包裹
<thead>和<tbody>，哪怕只有一行标题；<tfoot>可选，但合计行建议放进去 - 表头单元格一律用
<th>，不是<td>；列头加scope="col"，行头加scope="row" - 每个表格加
<caption>，哪怕只是<caption>用户列表</caption>——没有 caption 的表格，对读屏用户等于没标题 - 避免用
colspan/rowspan做视觉对齐，那是布局问题；真需要合并，确保逻辑上确实属于同一维度（比如“季度汇总”跨三列）
重构时最容易被忽略的兼容性坑
改完一刷新页面没崩，不代表真好了：
- JS 里硬编码找
document.querySelectorAll('table tr td')的逻辑会断——改成用 class（如.data-cell）或 data 属性定位 - CSS 中写死
table td:first-child的样式会失效——给关键单元格加明确 class，别依赖位置关系 - IE 已死，但有些内网系统还在用老 Edge 或 Electron 旧版，
display: grid要配@supports降级方案，或者干脆用display: flex兜底 - 删掉
border="0" cellpadding="0" cellspacing="0"后，某些旧 CSS 可能依赖这些属性重置默认样式——检查 reset.css 是否覆盖到位
重构不是追求代码行数变少，而是让每一行 HTML 都有明确职责：该语义的语义，该样式的样式，该交互的交互。删错一个 <table> 顶多样式偏移，漏掉一个 scope 属性，可能就让整张表对视障用户不可读。
