HTML表格优化应先明确语义结构（thead/tbody/tfoot），再用CSS控制样式；禁用过时属性，慎用colspan/rowspan，移动端需用data-label重构，最后须通过Lighthouse可访问性审计验证。
直接说结论：HTML表格布局优化不是靠堆 colspan 和 rowspan，而是先理清语义结构，再用现代 CSS 控制视觉表现。盲目合并单元格、硬写固定宽度，反而让表格更难维护、更不兼容。
用 thead/tbody/tfoot 明确语义分层
原生 <table> 没有逻辑分区时，CSS 无法精准控制表头冻结、总行样式或打印行为。浏览器和屏幕阅读器也难以识别哪部分是标题、哪部分是数据。
-
<thead>必须只包一行或多行<tr>，且内部应全用<th>（即使多级表头也要嵌套<tr>） -
<tbody>是数据主体，可多个并存（比如按月份分组），但不要把<tr>直接写在<table>下面 -
<tfoot>要放在<tbody>之前——浏览器会自动渲染到底部，且对打印样式支持更好 - 错误写法：
<table><tr><th>A</th></tr><tr><td>B</td></tr></table>（缺失语义容器，CSS 选择器失效风险高）
避免用 width 属性和 cellpadding/cellspacing
这些 HTML 属性早已被 CSS 取代，继续用会导致样式不可预测，尤其在响应式场景下：
-
width="50%"在 flex 容器里可能被忽略；width="200px"遇到小屏直接溢出 -
cellpadding和cellspacing无法单独控制内边距方向（比如只要左 padding），也不能继承或用媒体查询覆盖 - 正确做法：用
table { width: 100%; table-layout: fixed; }+th, td { padding: 8px 12px; }+ 为列设置min-width或width类 - 特别注意：
table-layout: fixed后，第一行<th>的宽度决定整列宽度，后续行内容再长也不会撑开列
移动端表格别靠“隐藏列”，优先用 display: block + 伪元素重构
单纯用 @media (max-width: 768px) { .hidden-on-mobile { display: none; } } 会丢失数据上下文，用户根本不知道那列原本是什么。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：给每行
<tr>加 classresponsive-row，然后用td { display: block; position: relative; } - 再配合
td::before { content: attr(data-label); font-weight: bold; display: inline-block; min-width: 80px; }，让每个单元格自带标签 -
data-label必须手动加在 HTML 里，例如：<td data-label="订单号">ORD-2026-XXXX</td> - 不推荐 JS 动态注入
data-label——首屏渲染时看不到标签，影响可访问性和 SEO
跨列合并前先问：这真是表格该干的事？
colspan 和 rowspan 不是布局工具，它们的唯一合法用途是表达「一个数据项横跨多个维度」，比如「Q1 总计」覆盖 Jan/Feb/Mar 三列。滥用会导致语义断裂、屏幕阅读器误读、打印错位。
- 典型误用：
<td colspan="3">操作</td>放在最后一行——这不是数据合并，是 UI 布局需求，该用 CSS Grid 或 Flex 替代 - 真正需要
colspan的场景：多级表头（如「销售额」下分「线上」「线下」）、空单元格占位（如某行无数据但需对齐） - 如果只是为了“让文字居中铺满”，直接用
th { text-align: center; }+width控制列宽更干净 - 合并后记得检查：用开发者工具选中单元格，看 computed styles 里
grid-column是否异常（某些旧版 Safari 对 colspan 渲染不稳定）
最常被忽略的一点：表格优化不是“做完就完”，而要持续验证——打开 Chrome 的 Lighthouse，跑一次「Accessibility」审计，重点看「<table> has no <caption>」和「Data tables have a header」这两条是否通过。没通过，说明语义还没立住，样式再好看也没用。
