必须用 <th> 而不是 <td> 定义表头，因其具有语义性，能被屏幕阅读器识别为标题，确保表格朗读时上下文正确；仅靠 CSS 样式无法替代该语义功能。
为什么必须用 <th> 而不是 <td> 定义表头
因为 <th> 是语义标签，告诉浏览器和屏幕阅读器“这是标题”，不是视觉样式开关。仅靠 CSS 加粗居中 <td> 不会触发辅助技术的表头识别逻辑，表格朗读时会把标题当成普通数据读出来，顺序错乱、上下文丢失。
常见错误现象：表格在 NVDA 或 VoiceOver 中逐单元格平铺朗读，不报“姓名：张三”，只读“张三”，用户无法理解哪列对应哪项数据。
-
<th>默认加粗居中是浏览器样式，但语义才是核心；删掉 CSS 后语义依然有效 - 行表头（如“上午”“下午”）也必须用
<th>，不能只在第一行用 - 嵌套在
<thead>里的<th>自动被推断为列标题，但复杂结构建议显式加scope
scope 属性怎么填才不白写
scope 是明确表头作用范围的“说明书”，不写也能跑，但一到多级表头或行列混合标题就失效。它只有两个合法值：col 和 row，别写 column 或 all —— 浏览器直接忽略。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 第一行
<th>描述列 →scope="col"（最常见） - 第一列
<th>描述行（如时间表左栏）→scope="row" - 左上角单元格既管行又管列？不要强行
scope="row col"，那是无效值；改用<colgroup>+<col>或拆分表结构
错误示例：<th scope="colgroup">产品类别</th> —— 这个值不存在，等同于没写。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
多级表头必须用 colspan 和 rowspan 配合 <th>
比如“销售额”下分“线上”“线下”，这种两级结构不能靠缩进或 CSS 实现，必须靠属性声明跨列/跨行关系，否则屏幕阅读器无法建立层级映射。
关键规则：
-
colspan="2"表示该<th>占据 2 列，下方对应 2 个<th>（不能是<td>） -
rowspan="2"表示该<th>占据 2 行，右侧需补足空单元格保持结构对齐 - 所有
<th>必须严格嵌套在<tr>内，不能漏掉某行的<th>或用<td>混充
反例：<th colspan="2">销售额</th><th>成本</th> 后面没跟 <tr> 放二级标题 → 表格解析失败，部分浏览器渲染错位。
别让 CSS 破坏 <th> 的语义权重
给 <th> 加 font-weight: normal 或 text-align: left 没问题，但以下操作会实质性削弱其语义：
- 用
display: block或float: left把<th>拉出表格流 → 辅助技术可能跳过它 - 用
aria-hidden="true"或visibility: hidden隐藏表头 → 标题消失，整列数据失去上下文 - 把
<th>套进<div>或<span>→ 打断语义链，scope失效
真正需要视觉降级（比如灰字小号）时，只调 color 和 font-size，保留原生 <th> 结构和 display 类型。
<th> 都写对了，如果表格缺少 <thead> 区域、或者 <th> 散落在多个 <tr> 里没归组，某些旧版 JAWS 仍会降级处理为纯数据表。语义完整性不是单点正确，而是结构闭环。 
