table 不适合整体页面布局，但作为语义化数据容器不可替代；必须规范使用 thead/tbody/tfoot、colspan/rowspan、caption 及 CSS 替代废弃属性，以保障可访问性、响应式与打印正确性。
table 不适合做页面整体布局，但作为数据展示容器，它的高级用法依然关键且实用。 用 table 布局页面在现代前端中已被 flex 和 grid 全面取代，强行用它套页面结构会导致语义混乱、响应式困难、可访问性差。但处理报表、后台数据列表、固定行列关系的配置表时，table 的语义准确性和浏览器原生支持仍是不可替代的。
为什么
不能省略？
它们不是“可有可无的装饰”，而是影响渲染行为和可访问性的核心语义分组：
<thead> 区域在滚动长表格时，部分浏览器（如 Chrome）支持 <code>position: sticky 固定表头，但前提是必须显式写出 <thead> 标签，仅靠 CSS 无法触发该行为；
<li>屏幕阅读器会根据 <code><thead>/<code><tbody> 自动关联表头与数据行，省略后可能读成“张三、25、前端开发工程师”而无列名上下文；
<li><code><tfoot> 必须写在 <code><tbody> 之前（HTML 规范要求），否则会被浏览器自动移到底部，但语义已丢失——比如合计行写在最后再包裹 <code><tfoot>，实际 DOM 顺序错乱，打印或导出 PDF 时易出错。
<h3>colspan 和 rowspan 容易踩的坑</h3>
<p>合并单元格看着简单，但跨行/跨列逻辑一旦出错，整个表格结构就塌陷：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill7761" title="Article To Html">Article To Html</a>
<p>文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul><li>横向合并用 <code>colspan="3"，表示“占 3 列”，但当前行剩余 <td> 或 <code><th> 的数量必须与之匹配，否则后续行列数对不上，浏览器会强制补空单元格，导致错位；
<li>纵向合并用 <code>rowspan="2"，它只影响“当前行及下一行”，不会自动跳过下一行的对应位置——下一行该列必须留空（即不写 <td>），否则会重复渲染；
<li>混合使用时，优先算清“视觉网格总数”，例如一个 4×3 表格里，第一行第一个单元格 <code>colspan="2" rowspan="2"，那它实际覆盖 (0,0) 和 (0,1) 及 (1,0) 和 (1,1)，第二行前两列就必须为空。border、cellpadding、cellspacing 在 HTML5 中已失效
这些属性在 HTML5 中被完全废弃，写在标签上无效（浏览器可能兼容渲染，但 W3C 验证失败，且未来可能移除）：
立即学习“前端免费学习笔记（深入）”；
-
border="1" → 改用 CSS：table { border-collapse: collapse; } td, th { border: 1px solid #ccc; }；
-
cellpadding="10" → 对应 td, th { padding: 10px; }；
-
cellspacing="0" → 必须设 table { border-collapse: collapse; }，否则默认是 separate，单元格间隙由 border-spacing 控制（注意：它不能作用于单个单元格，是整表属性）；
- 别再用
align="center" 或 width="500"，全部交由 CSS 控制，否则响应式断点（如移动端缩放）会彻底失控。
caption 标签不只是“加个标题”
<caption></caption> 是唯一被 WCAG（无障碍标准）明确认定为“表格必需描述”的元素，它的位置和内容直接影响 SEO 和辅助技术：
- 必须直接嵌套在
<table> 内部，且**只能有一个**，放在 <code><thead> 之前（规范强制）；
<li>内容应准确描述表格用途，比如 <code><caption>2026 年 Q1 各部门销售额（单位：万元）</caption>，而不是“销售表”这种模糊表述；
- 默认居上显示，如需居下，用 CSS：
caption { caption-side: bottom; }，但不要用 text-align 或 margin 模拟，否则屏幕阅读器仍按“顶部标题”解析。
真正难的不是写对标签，而是让每个 th 和 td 都能被键盘焦点抵达、被语音准确播报、在窄屏上不溢出、在打印时不截断——这些细节，往往在交付前最后一刻才暴露出来。
<thead> 区域在滚动长表格时，部分浏览器（如 Chrome）支持 <code>position: sticky 固定表头，但前提是必须显式写出 <thead> 标签，仅靠 CSS 无法触发该行为；
<li>屏幕阅读器会根据 <code><thead>/<code><tbody> 自动关联表头与数据行，省略后可能读成“张三、25、前端开发工程师”而无列名上下文；
<li><code><tfoot> 必须写在 <code><tbody> 之前（HTML 规范要求），否则会被浏览器自动移到底部，但语义已丢失——比如合计行写在最后再包裹 <code><tfoot>，实际 DOM 顺序错乱，打印或导出 PDF 时易出错。
<h3>colspan 和 rowspan 容易踩的坑</h3>
<p>合并单元格看着简单，但跨行/跨列逻辑一旦出错，整个表格结构就塌陷：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill7761" title="Article To Html">Article To Html</a>
<p>文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul><li>横向合并用 <code>colspan="3"，表示“占 3 列”，但当前行剩余 <td> 或 <code><th> 的数量必须与之匹配，否则后续行列数对不上，浏览器会强制补空单元格，导致错位；
<li>纵向合并用 <code>rowspan="2"，它只影响“当前行及下一行”，不会自动跳过下一行的对应位置——下一行该列必须留空（即不写 <td>），否则会重复渲染；
<li>混合使用时，优先算清“视觉网格总数”，例如一个 4×3 表格里，第一行第一个单元格 <code>colspan="2" rowspan="2"，那它实际覆盖 (0,0) 和 (0,1) 及 (1,0) 和 (1,1)，第二行前两列就必须为空。border、cellpadding、cellspacing 在 HTML5 中已失效
这些属性在 HTML5 中被完全废弃，写在标签上无效（浏览器可能兼容渲染，但 W3C 验证失败，且未来可能移除）：
立即学习“前端免费学习笔记（深入）”；
-
border="1"→ 改用 CSS：table { border-collapse: collapse; } td, th { border: 1px solid #ccc; }； -
cellpadding="10"→ 对应td, th { padding: 10px; }； -
cellspacing="0"→ 必须设table { border-collapse: collapse; }，否则默认是separate，单元格间隙由border-spacing控制（注意：它不能作用于单个单元格，是整表属性）； - 别再用
align="center"或width="500"，全部交由 CSS 控制，否则响应式断点（如移动端缩放）会彻底失控。
caption 标签不只是“加个标题”
<caption></caption> 是唯一被 WCAG（无障碍标准）明确认定为“表格必需描述”的元素，它的位置和内容直接影响 SEO 和辅助技术：
- 必须直接嵌套在
<table> 内部，且**只能有一个**，放在 <code><thead> 之前（规范强制）； <li>内容应准确描述表格用途，比如 <code><caption>2026 年 Q1 各部门销售额（单位：万元）</caption>，而不是“销售表”这种模糊表述； - 默认居上显示，如需居下，用 CSS：
caption { caption-side: bottom; }，但不要用text-align或margin模拟，否则屏幕阅读器仍按“顶部标题”解析。
真正难的不是写对标签，而是让每个 th 和 td 都能被键盘焦点抵达、被语音准确播报、在窄屏上不溢出、在打印时不截断——这些细节，往往在交付前最后一刻才暴露出来。
