caption必须紧贴表格开头且不可为空，它是屏幕阅读器进入表格时播报的第一句内容，作为上下文锚点；scope属性须显式声明行列头，复杂结构需用id+headers精准关联，动态渲染时id须早于headers挂载。
Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
caption必须紧贴
开头且不可为空
屏幕阅读器进入表格时，第一句播报的就是caption>内容。它不是装饰，而是上下文锚点。写成<code><caption>数据表</caption>或塞进<code><thead>里，用户根本不知道这张表是干啥的。
<ul>
<li>正确位置：<code><table>
<caption>2026年Q1前端班学员考核成绩</caption>
<thead>...</thead>
</table>
错误写法：<table><thead><caption>...</caption></thead></table> 或 <code><caption></caption>（空内容）
别用title属性或CSS伪元素替代——读屏器不读它们
scope="col"和scope="row"必须显式声明，不能靠位置猜
浏览器不会因为
在第一行就自动当列头，也不会因为它是某行第一个就当成行头。漏掉scope，<th>就只是加粗文本，读屏器只报“张三”“32”，不报“姓名：张三”“年龄：32”。
<ul><li><code><th scope="col">姓名</th> 只能放在<code><thead>中，管整列
<li><code><th scope="row">第一季度</th> 必须放在<code><tbody>每行首个<code><th>里，不能放<code><td>中
<li>操作列（如“编辑”“删除”）没语义表头，就该用<code><td>，别硬套<code><th>
<h3>复杂表头必须用id + headers，scope在此失效</h3>
<p>一旦出现<code>rowspan、<code>colspan或多级嵌套（比如“Biology → Practical”），<code>scope就无法准确表达归属关系。屏幕阅读器会断连，用户听到“85”，却不知是哪科哪类成绩。
<th>必须带唯一<code>id，例如<code><th id="bio-prac" scope="col">Practical</th>
<li><code><td>用空格分隔多个真实存在的<code>id：<code><td headers="subject bio-prac">85</td>
<li>大小写、空格全敏感：<code>id="Bio-Prac" 和 <code>headers="bio-prac" 不匹配
headers存在时，<code>scope会被忽略——二者不叠加，只取<code>headers动态渲染表格时，id必须先于headers挂载到DOM
React/Vue里常见问题：先渲染<td headers="name">，再异步挂载<code><th id="name">。无障碍树初始化时找不到目标<code>id，关联失败，且无任何报错提示。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>确保<code><th id="...">在组件首次挂载时已存在，不要延迟生成
<li>服务端渲染（SSR）或静态生成（SSG）更稳妥，避免客户端首次渲染缺失</li>
<li>用浏览器开发者工具的“Accessibility”面板实时检查“Related table header”是否列出对应<code>id
真正难的不是查文档写对headers，而是在敲下每个<code><th>时，下意识问一句：“它管的是行，还是列？它有没有跨格？它是不是多级结构里的其中一层？”这个条件反射比任何自动化检测都关键。</th>
|
