真正该保留的表格仅两类：带行列语义的数据集（如销售报表、API字段对照表）和需colspan/rowspan的原生表格行为；其余导航栏、卡片栅格等均属滥用，应改用Flexbox或Grid重构。
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
识别哪些
属于布局滥用
真正该保留的表格，只有两类：带明确行列语义的数据集（如销售报表、API响应字段对照表），以及需要原生表格行为的场景（如colspan/rowspan跨格合并）。其余所有用
实现导航栏、卡片栅格、表单对齐、页脚分栏的写法，都属于历史遗留滥用——它们不是“还能跑”，而是正在拖慢可访问性、响应式适配和CSS维护效率。
替换为Flexbox或Grid的实操路径
别试图“微调”旧表格结构。直接删掉<table>、<code><tr>、<code><td>，按语义重构容器：
<ul>
<li>导航菜单 → <code><nav></nav> + display: flex + gap
两栏内容区（左标题右说明） → <div class="grid-2"> + <code>display: grid; grid-template-columns: max-content 1fr
操作按钮组 → <div class="btn-group"> + <code>display: flex; gap: 8px
表单字段对齐 → <form></form>内用display: grid; grid-template-columns: 120px 1fr控制标签与输入框宽度
关键点：用gap替代margin控制子项间距，它不触发父容器重排，且天然规避inline-block换行间隙问题。
处理嵌套表格和复杂colspan的现实妥协
如果表格里真有跨多列的汇总行、动态合并单元格，或需兼容老旧邮件客户端，强行转Flex/Grid会破坏语义和渲染一致性。此时应：
立即学习“前端免费学习笔记（深入）”；
- 保留
<table>外壳，但剥离所有<code>width、height、align等HTML属性，全交由CSS控制
- 用
border-collapse: separate + border-spacing: 0替代collapse，避免IE旧版对padding的压缩bug
- 给
<th>加<code>scope="col"或scope="row"，补全屏幕阅读器可读性
- 若需响应式隐藏某列，用
display: none而非visibility: hidden——后者仍占表格布局空间
验证重构是否成功的三个硬指标
改完别只看浏览器是否“长得一样”。必须检查：
- 用Chrome DevTools的Accessibility面板，确认所有交互元素有正确
role和aria-label（旧表格常缺失）
- 禁用CSS后，纯HTML结构是否仍能线性阅读（
<table>布局禁用CSS后会变成混乱堆叠，而Flex/Grid容器会退化为合理块级流）
<li>在移动端横屏/竖屏切换时，Flex/Grid容器能自然换行或缩放，而<table>会强制出现水平滚动条
<p>最易被忽略的是语义断裂：把<code><td>改成<code><div>却不加<code>role="cell"，或把<th>换成<code><h3></h3>却没补aria-sorted——这会让表格排序功能对残障用户彻底失效。
