语义正确的HTML表格必须用包裹、、，其中为首个子元素，含至少一行，须在前，所有表头需用scope或headers明确作用范围。
用 <table> 套 <code><thead>、<code><tbody>、<code><tfoot> 才算语义正确
<p>浏览器和屏幕阅读器只靠标签嵌套关系识别表格结构，光用 <code><table> + <code><tr> + <code><td> 会丢失行头/列头意图。比如排序后 <code><thead> 能固定在顶部，打印时 <code><tfoot> 可自动出现在每页底部。
<p>常见错误现象：<code><tr> 直接塞进 <code><table> 里，没分组；或者把 <code><caption></caption> 放在 <thead> 里面（它必须是 <code><table> 的第一个子元素）。
<ul><li><code><thead> 必须包含至少一个 <code><tr>，且该行所有单元格应为 <code><th>
<li><code><tbody> 可以有多个，方便 JS 动态插入数据块
<li><code><tfoot> 必须写在 <code><tbody> 之前——HTML 解析顺序要求，否则部分浏览器会重排 DOM
<h3><code><th> 的 <code>scope 和 headers 属性不是可选项
没有明确标注表头作用范围的表格，对残障用户基本不可读。单纯靠视觉对齐或 CSS 样式无法被读屏软件识别。
使用场景：二维数据表（比如“月份”作列头、“产品”作行头），需要双向关联单元格与对应表头。
立即学习“前端免费学习笔记（深入）”；
- 单行/单列表头用
scope="row"或scope="col"，简单直接 - 复杂表头（如合并单元格后出现多级标题）必须用
headers="id1 id2"显式绑定，且对应<th> 要有 <code>id - 别用
scope="rowgroup"或scope="colgroup"—— 支持度极差，主流读屏软件基本忽略 - 如果只是做响应式网格布局（比如商品卡片），用
display: grid更合理 - 如果真要展示行列关系的数据，哪怕只有两行三列，也老实用
<table><li>不要为了“语义化”把菜单、导航栏强行套进 <code><table> —— 它只适合数据表格，不是通用布局工具 <h3> <code><caption></caption>必须存在，且不能空 - 内容需描述表格核心目的，例如：
<caption>2024 年各区域销售额（单位：万元）</caption> - 支持
caption-side: bottom，但默认在顶部，视觉位置不影响语义有效性 - 如果表格有筛选条件，
<caption></caption>应体现当前状态，比如加上“（已按销量降序）”
避免用 <div> 模拟表格布局
<p>CSS Grid 或 Flex 实现的“看起来像表格”的结构，对语义化、键盘导航、打印样式、Zoom 缩放都存在硬伤。特别是当内容需要排序、导出 CSV 或被爬虫提取时，<code><div role="table"> 这类 ARIA 补丁只是权宜之计。
<p>性能影响：浏览器对原生表格有专门渲染优化，而 <code>display: table-cell 在大量数据下重排开销明显更高。
这是表格唯一合法的标题容器，缺失会导致 WCAG 2.1 AA 级别失败。很多开发者以为加个 <h2></h2> 在表格上面就行，但那只是普通标题，和表格本身无绑定关系。
容易踩的坑：<caption></caption> 写在 <thead> 里面；或者用 <code>aria-label 替代；或者内容纯是装饰性文字（如“如下所示”）。
<th> 是否真正承担了可访问的语义职责。很多人写了 <code><thead> 却忘了给 <code><th> 加 <code>scope，结果表格在读屏软件里变成一串无意义的单元格流。
