复杂表格不该被替代，真正需替代的是用做非数据布局的行为；只要满足行列关系明确、需屏幕阅读器导航、支持csv导出、含汇总/分组/跨行列头等条件，就应坚持使用。
复杂表格本身不该被“替代”，真正需要替代的是用 <table> 做非数据布局的行为。语义化标签不是用来替换表格结构的，而是帮你判断：这到底是不是一张表？
<h3>什么时候该坚持用 <code><table> 而不是改用 <code><div> + CSS
<p>只要满足以下全部条件，就该继续用 <code><table>：
<ul>
<li>数据存在明确的行列关系（比如「用户ID｜姓名｜注册时间｜状态」）</li>
<li>需要被屏幕阅读器按行/列导航（<code><th scope="col"> + <code><td> 配合是不可替代的）
<li>内容会导出为 CSV / Excel，或被爬虫、报表工具解析</li>
<li>有汇总行（<code><tfoot>）、分组行（多个 <code><tbody>）、跨行列头（<code>colspan/rowspan）
强行换成 <div class="row"><div class="cell"> 会让辅助技术完全丢失结构上下文，且无法触发浏览器原生的表格快捷键（如 Ctrl+Alt+方向键跳转单元格）。
<h3>
<code><caption></caption>、<thead>、<code><tbody> 不是可选装饰
<p>它们不是为了“看起来更规范”，而是告诉浏览器和读屏软件：“这里开始是标题”“这里是列定义”“这里是主数据区”。省略或错序会直接导致：</p>
<ul><li>屏幕阅读器把第一行数据误读为表头（没 <code><thead>）
<li>导出工具把页脚汇总行当成普通数据（没 <code><tfoot>）
<li>
<code><caption></caption> 缺失时，aria-describedby 失效，复杂表格失去上下文说明
注意：<tbody> 即使只写一个，也建议显式写出——隐式 <code><tbody> 在 JS 操作 DOM 时容易引发意外重排，尤其配合 <code>insertRow() 或 deleteRow() 时。
真要“替代表格布局”，该用 display: grid 而不是语义化标签
如果你实际想解决的是「用表格对齐表单字段」「用表格做三栏首页」这类问题，那根本不是语义化问题，而是布局误用。此时：
- 别套
<section></section>或<article></article>——它们不解决二维对齐 - 直接上
display: grid，用grid-template-areas或grid-column控制位置 - 若需响应式断点，
grid比任何表格 hack 都干净；flex适合一维流式，grid才匹配“行+列”的真实需求
例如仪表盘卡片网格、带固定侧边栏的后台布局、新闻列表的多栏流——这些场景下，<table> 的语义和行为全是错的，硬加 <code>role="grid" 也补不回缺失的键盘导航逻辑。
最常被忽略的一点：语义化不是贴标签，而是守契约。<table> 的契约是“结构化二维数据”，打破它再怎么加 ARIA 属性，都只是打补丁。</table>
