真表格需满足三条件：数据可行列读取、表头用scope明确关联、存在真实二维关系；否则为伪表格，应改用flex布局或语义化HTML结构。
先判断是不是真表格：用 <table> 前必须问三句话
<p>不是所有带格子的结构都该用 <code><table>。重构第一步，是停手、看语义：<br>• 里面的数据能不能被屏幕阅读器按行列读出来？<br>• 表头有没有用 <code><th scope="col"> 或 <code><th scope="row"> 明确关联？<br>• 是否存在真实二维关系（比如“2023年Q1销售额”对应“华东区”）？<br>只要有一条答不上来，它大概率是“伪表格”——比如导航栏、卡片列表、表单行、图标+文字组合——这类必须换掉，不能修修补补。
<h3>伪表格怎么替换成 flex：三步收掉老 <code><tr><td> 套路
<p>典型误用：<pre class="brush:php;toolbar:false;"><table><tr><td><img alt="HTML表格重构如何操作？规范化改造详细指引" ></td><td>标题</td><td><button></td></tr></table></p>
<p>这不是表格，是水平排列三项内容。直接上 flex：<br>• 外层加 <code>display: flex; align-items: center; gap: 8px;</pre> 替代 <code>valign="middle" 和手动 margin
• 子元素去掉 float、inline-block、vertical-align —— 这些在 flex 容器里无效
• 最后一项右对齐？给它加 margin-left: auto;，别用 text-align: right 包一层
注意：gap 不兼容 IE11，若需支持，改用 margin-right 并手动清除最后一项的 margin。
立即学习“前端免费学习笔记（深入）”；
真表格怎么优化：保留 <table> 但必须加语义和可访问性
<p>财务报表、课程表、API 返回的 JSON 渲染结果——这些该留，但不能裸留：<br>• 必须包裹 <code><caption></caption>，说明表格主题（SEO + 屏幕阅读器依赖）
• 表头用 <thead><th scope="col">，行标题用 <code><th scope="row">，别全用 <code><td>
<br>• 合并单元格慎用：<code>rowspan/colspan 超过 2 层，会极大增加读屏复杂度
• 禁止内联样式如 width="50%"、align="center"，统一走 CSS：table-layout: fixed; + width: 100% 控制整体，min-width 控制列
响应式表格卡住了？别硬塞 overflow-x，试试更可控的方案
小屏下表格横向滚动体验差，且焦点键盘操作容易丢失。替代路径：
• 单行数据量不大（≤5 列）：用 @media (max-width: 768px) 把 <tr> 改成 <code>display: block，<th></th>
<td> 变成 <code>display: flex + flex-direction: column，每项显示为“标签：值”
• 列多且关键（如后台数据列表）：优先加列筛选或搜索，而不是强行展示全部列
• 绝对避免 <div style="overflow-x: auto"><table></table></div> —— 它会让屏幕阅读器把整张表当一个黑盒，跳过内部结构
真正难的不是写代码，是每次改 <table> 前，得先想清楚：这东西到底是不是给人读的、读的人能不能搞清行列关系、改完之后键盘用户还能不能一行行 tab 过去。漏掉这个，后面所有 CSS 和 JS 都是白忙。 </table>
