必须用 而不是 定义表头，因其具有语义性，能被屏幕阅读器识别为标题，确保表格朗读时上下文正确；仅靠 css 样式无法替代该语义功能。

为什么必须用 <th> 而不是 <code><td> 定义表头 <p>因为 <code><th> 是语义标签，告诉浏览器和屏幕阅读器“这是标题”，不是视觉样式开关。仅靠 CSS 加粗居中 <code><td> 不会触发辅助技术的表头识别逻辑，表格朗读时会把标题当成普通数据读出来，顺序错乱、上下文丢失。 <p>常见错误现象：表格在 NVDA 或 VoiceOver 中逐单元格平铺朗读，不报“姓名：张三”，只读“张三”，用户无法理解哪列对应哪项数据。</p> <ul><li><code><th> 默认加粗居中是浏览器样式，但语义才是核心；删掉 CSS 后语义依然有效 <li>行表头（如“上午”“下午”）也必须用 <code><th>，不能只在第一行用 <li>嵌套在 <code><thead> 里的 <code><th> 自动被推断为列标题，但复杂结构建议显式加 <code>scope

scope 属性怎么填才不白写

scope 是明确表头作用范围的“说明书”，不写也能跑，但一到多级表头或行列混合标题就失效。它只有两个合法值：col 和 row，别写 column 或 all —— 浏览器直接忽略。

使用场景：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 第一行 <th> 描述列 → <code>scope="col"（最常见）
• 第一列 <th> 描述行（如时间表左栏）→ <code>scope="row"
• 左上角单元格既管行又管列？不要强行 scope="row col"，那是无效值；改用 <colgroup></colgroup> + <col> 或拆分表结构

错误示例：<th scope="colgroup">产品类别</th> —— 这个值不存在，等同于没写。

多级表头必须用 colspan 和 rowspan 配合 <th> <p>比如“销售额”下分“线上”“线下”，这种两级结构不能靠缩进或 CSS 实现，必须靠属性声明跨列/跨行关系，否则屏幕阅读器无法建立层级映射。</p> <p>关键规则：</p> <ul><li> <code>colspan="2" 表示该 <th> 占据 2 列，下方对应 2 个 <code><th>（不能是 <code><td>） <li> <code>rowspan="2" 表示该 <th> 占据 2 行，右侧需补足空单元格保持结构对齐 <li>所有 <code><th> 必须严格嵌套在 <code><tr> 内，不能漏掉某行的 <code><th> 或用 <code><td> 混充 <p>反例：<code><th colspan="2">销售额</th> <th>成本</th> 后面没跟 <tr> 放二级标题 → 表格解析失败，部分浏览器渲染错位。 <h3>别让 CSS 破坏 <code><th> 的语义权重 <p>给 <code><th> 加 <code>font-weight: normal 或 text-align: left 没问题，但以下操作会实质性削弱其语义：

• 用 display: block 或 float: left 把 <th> 拉出表格流 → 辅助技术可能跳过它 <li>用 <code>aria-hidden="true" 或 visibility: hidden 隐藏表头 → 标题消失，整列数据失去上下文
• 把 <th> 套进 <code><div> 或 <code><span></span> → 打断语义链，scope 失效

  真正需要视觉降级（比如灰字小号）时，只调 color 和 font-size，保留原生 <th> 结构和 display 类型。 容易被忽略的是：即使所有 <code><th> 都写对了，如果表格缺少 <code><thead> 区域、或者 <code><th> 散落在多个 <code><tr> 里没归组，某些旧版 JAWS 仍会降级处理为纯数据表。语义完整性不是单点正确，而是结构闭环。</tr>