老页面里的 不是“必须删”，而是要分三类处理：真实数据表保留并语义增强，伪布局表用 display: flex 一行重写，多维结构表改用 display: grid；硬套 CSS 覆盖或用 div 模拟表格，90% 会埋下可访问性和响应式隐患。
直接说结论：老页面里的 <table> 不是“必须删”，而是要分三类处理——真实数据表保留并语义增强，伪布局表用 <code>display: flex 一行重写，多维结构表改用 display: grid；硬套 CSS 覆盖或用 div 模拟表格，90% 会埋下可访问性和响应式隐患。
怎么判断一个 <table> 是不是“真表格”
<p>别看它长得像不像表格，看它承载什么内容：</p>
<ul><li>如果内容能导出为 Excel、会被后端 API 当作 <code>rows 和 columns 解析（如价格对比、参数清单、财务明细），就是真表格，必须保留 <table> 并补全语义
<li>如果只是用来对齐 logo + 标题 + 搜索框，或让三个按钮横排居中，那就是伪表格，<strong>删掉 <code><table> 改用 <code>flex
如果源码里出现 width="100%"、cellpadding、valign="middle" 这类 HTML4 属性，基本可判定是布局滥用，优先级最高
真表格怎么补语义？三步不能少
保留 <table> 不等于完事。没加 <code><caption></caption>、<thead>、<code><th scope="col"> 的表格，对屏幕阅读器和 SEO 来说等于“没写标题的文档”。
<ul><li>
<code><caption></caption> 必须有且唯一，放在 <table> 最开头，文本要含业务关键词，比如 <code><caption>2026年Q3各渠道转化率对比表</caption>
<thead> 包住所有表头行，<code><tbody> 包住数据行，<code><tfoot> 放汇总/注释（即使视觉上在顶部，DOM 顺序也得按这个来）
<li>每个 <code><th> 都要带 <code>scope：单层表头用 scope="col" 或 scope="row"；多级表头（如“费用类型”下分“医保支付”“自付”）必须配 id + headers 属性，否则辅助技术无法建立归属关系
伪表格用 flex 替换时最容易踩的坑
老代码里最多见的是这种结构：
<table><tr><td><img alt="HTML表格重构怎么改？老页面改造实用技巧" ></td><td>标题</td><td><button></td></tr></table></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>别给子元素设 <code>float
或 inline-block —— flex 容器内这些声明完全无效
用 align-items: center 替代 valign="middle"，它对图标+文字混排更稳定；vertical-align 在 flex 里不生效
用 gap 控制间距，比在每个 <div> 上写 <code>margin-right 更干净，也避免最后一个元素多出空白
若需“最后一项右对齐”，直接给那个子元素加 margin-left: auto，别用 text-align: right 或额外包一层 <div>
<h3>什么时候该放弃 <code>flex 上 grid
width="100%"、cellpadding、valign="middle" 这类 HTML4 属性，基本可判定是布局滥用，优先级最高<table> 不等于完事。没加 <code><caption></caption>、<thead>、<code><th scope="col"> 的表格，对屏幕阅读器和 SEO 来说等于“没写标题的文档”。
<ul><li>
<code><caption></caption> 必须有且唯一，放在 <table> 最开头，文本要含业务关键词，比如 <code><caption>2026年Q3各渠道转化率对比表</caption>
<thead> 包住所有表头行，<code><tbody> 包住数据行，<code><tfoot> 放汇总/注释（即使视觉上在顶部，DOM 顺序也得按这个来）
<li>每个 <code><th> 都要带 <code>scope：单层表头用 scope="col" 或 scope="row"；多级表头（如“费用类型”下分“医保支付”“自付”）必须配 id + headers 属性，否则辅助技术无法建立归属关系
伪表格用 flex 替换时最容易踩的坑
老代码里最多见的是这种结构：
<table><tr><td><img alt="HTML表格重构怎么改？老页面改造实用技巧" ></td><td>标题</td><td><button></td></tr></table></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>别给子元素设 <code>float或
inline-block —— flex 容器内这些声明完全无效
align-items: center 替代 valign="middle"，它对图标+文字混排更稳定；vertical-align 在 flex 里不生效gap 控制间距，比在每个 <div> 上写 <code>margin-right 更干净，也避免最后一个元素多出空白
margin-left: auto，别用 text-align: right 或额外包一层 <div>
<h3>什么时候该放弃 <code>flex 上 grid
当结构明显是二维的，比如“四宫格产品卡片”“三行两列设置项”“带行列冻结的后台列表”，别硬用 flex-wrap + min-width + calc() 拼——调试成本高，小屏断点难控，语义也弱。
-
grid天然支持行列定义，grid-template-columns: repeat(4, 1fr)就搞定四等分布局 - 需要跨行/跨列（如“操作列固定在最右”），
grid-column: -1或grid-area比colspan更可控 - 注意兼容性：IE11 不支持
grid，但 2026 年绝大多数项目已无需兼容；若必须支持，可用@supports (display: grid)做降级
真正麻烦的从来不是“怎么换布局”，而是“换完之后谁来维护语义”。比如把 <th> 全改成 <code><div class="header">，样式可能一样，但屏幕阅读器读不出来，后续加排序、导出、无障碍测试全得返工。重构不是一次动作，是把语义意识刻进 DOM 结构里。</div>
