html表格需通过、及scope或headers属性赋予语义，否则屏幕阅读器仅线性朗读单元格内容；须为首子元素且不可省略，scope属性强制声明行列关系，复杂结构必须用id+headers显式绑定。
为什么表格没语义，屏幕阅读器就“读不懂”
HTML表格本身不自带语义，<table>只是个容器。如果只用<code><tr><td>堆数据，屏幕阅读器会把它当一堆无关联的单元格念出来——比如“32”“北京”“张三”，但不会告诉你“张三，年龄32，城市北京”。真正起作用的是<code><caption></caption>、<th>、<code>scope这些标签和属性，它们才是给机器读的“说明书”。
<caption></caption>必须放在<table>开头，不能塞进<code><thead><p>很多开发者把<code><caption></caption>写在<thead>里，或者用CSS隐藏后再靠<code>aria-labelledby补救，这都无效。屏幕阅读器只认它作为<table>的第一个子元素。
<ul>
<li>
<code><caption></caption>内容要具体，比如<caption>2026年Q2前端岗位面试通过率统计</caption>，不是<caption>数据表</caption>
summary属性已完全失效，axe、WAVE等工具会直接报严重错误，别再用<caption></caption>并设为visually-hidden类（用clip: rect(0 0 0 0)等安全隐藏方式），不能删掉
scope="col"和scope="row"不是可选，是强制声明
没有scope，<th>就是普通加粗文本。屏幕阅读器不会自动推断第一行管列、第一列管行。
<ul><li><code><th scope="col">只能出现在<code><thead>里，对应横向列标题（如“姓名”“入职时间”）
<li><code><th scope="row">只能出现在<code><tbody>每行第一个单元格，且必须是<code><th>，不能是<code><td>
<li>筛选行、操作列里的控件（如复选框、编辑按钮）必须包在<code><td>里，内部<code><input>加aria-label，绝不能给<tr>加<code>role="row"——这会破坏表格隐式角色
复杂表格必须用id + headers显式绑定
只要出现rowspan、colspan或多级表头，scope就失效。屏幕阅读器无法靠DOM位置猜关系，只认headers值。
- 给每个相关
<th>加唯一<code>id，例如<th id="dept-header" scope="col">部门</th> - 在
<td>上用空格分隔多个id：<code><td headers="name-header dept-header">张三</td> - 哪怕DOM顺序错乱，只要
headers写对，播报就准确；反之，视觉对齐再完美也没用
真正难的不是查文档写对
scope，而是在敲下每个<th>时，下意识问一句：“它管的是行，还是列？”这个条件反射比任何自动化检测都管用。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
