不该被删而应归位：真表格（如财务报表、参数对比）须保留并增强语义（含、scope、/）；假布局（如三栏排版、图标文字对齐）必须用 flex 或 grid 替换，避免响应式与可访问性失效。
直接说结论： 不该被删，而该被“归位”——真实数据表必须保留并语义化增强；伪布局表格必须替换成 flex 或 grid，否则响应式、可访问性、维护成本全崩。怎么判断一个 是真表格还是假布局？别看结构，看用途：
- 如果它在展示行列明确的结构化数据（如价格对比、参数清单、财务明细、用户列表），那就是真表格，不能动结构，只优化语义
- 如果它在实现页头+导航+内容三栏排版、图标+文字水平对齐、按钮横向排列，那就是假布局，必须替换，且优先用
flex
- 出现
width="100%"、align="center"、valign="middle"、cellpadding、cellspacing 这类 HTML4 属性，基本可判定是误用，重构优先级最高
- 嵌套超过两层
（比如 ），99% 是布局滥用，不是数据组织需要
真表格：保留 但必须补全语义光有 不算合格。屏幕阅读器和搜索引擎靠语义推导上下文，缺一不可：-
开始标签后，不能塞进 里
- 列头统一用
，行头用 ；多级表头必须用 scope 或 id+headers 显式绑定
- 数据区必须包在
里（即使只有一组数据）， 和 分离是排序、滚动固定表头、无障碍遍历的前提
- 避免
rowspan/colspan 滥用——跨格逻辑复杂时，优先拆成多个独立 + aria-describedby 更可靠
假布局：用 flex 替换最平滑，但别踩这些坑
老代码里最多见的是这种“三件套”水平排列：
对应 flex 写法要守住三条铁律：
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
- 容器设
display: flex + align-items: center（替代 valign="middle"），别再给子元素设 float 或 inline-block，它们在 flex 容器里被忽略
- 用
gap 控制间距，不是每个子项加 margin-right；gap 自动规避最后一个元素多出空白的问题
- 右对齐某一项，用
margin-left: auto 作用于该子元素，不要靠 text-align: right 或额外包一层
- 多行多列二维结构（如四宫格商品列表）别硬套
flex-wrap + min-width，该上 grid 就上，否则断点一调就错乱
内联样式和老旧属性怎么平滑过渡？
直接全局重置 [style] { all: unset; } 会干掉表单控件样式，引发更严重问题。稳妥做法是分层处理：
- 先用
包住所有老 ，CSS 中锁死：.legacy-table-wrapper table { table-layout: fixed; width: 100%; }
- 把
border="0"、cellspacing="0" 这类属性转成 CSS：border-collapse: collapse + border: none，注意 collapse 后 th 和 td 的边框会按权重叠加
- 中文输入法、
contenteditable、document.execCommand 失效等问题，说明你已进入 DOM 行为层，这时候光改 HTML 结构没用，得接管 beforeinput、paste、compositionend 事件，手动操作 Range
最常被忽略的一点：重构不是改完 HTML 就结束。你得打开 Chrome DevTools 的 Elements 面板，右键查 node.depth，超过 6 的节点必须砍——不是为了好看，是低端机上 offsetHeight 读取会触发强制同步布局，首屏渲染卡顿肉眼可见。
| |
|
|
|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
