th与td的本质区别在于语义和结构作用：th是表头单元格，td是数据单元格；误用会导致屏幕阅读器误读、excel导出丢失标题、自动化测试定位失败，且css样式无法弥补语义缺失。
区别不在样式，而在语义和结构作用——th 是表头单元格，td 是数据单元格；用错一个，屏幕阅读器读不准、Excel 导出丢标题、自动化测试定位失败。
为什么不能只靠 CSS 把 td 变成“看起来像表头”
很多人写 <td style="font-weight: bold; text-align: center;">姓名</td>，视觉上没问题，但实际埋了三个坑：
- 屏幕阅读器完全忽略它作为标题的意图，读到对应数据时只会报“张三”，不会说“姓名：张三”
- 导出为 Excel 时，这类
td通常不被识别为列名，首行变成普通数据行 - 前端测试脚本（如 Cypress 或 Playwright）用
th定位表头很稳定，但靠样式匹配td极易误判或漏选
th 必须嵌套在 tr 里，且不能直接塞进 table
常见 JS 拼接表格时漏掉外层 tr，比如这样写：
| 姓名 | 年龄 |
|---|
浏览器会自动补 tr，但控制台报 td outside tr 类警告，DOM 结构错乱，scope 属性失效，thead 逻辑也崩。正确写法必须是：
| 姓名 | 年龄 |
|---|
colspan 和 rowspan 在 th 和 td 中语法一样，但语义不能混用
这两个属性本身没限制标签类型，但用在哪、为什么用，决定了表格是否可理解：
-
<th colspan="2">联系方式</th>合理：一个标题横跨两列（“电话”和“邮箱”） -
<th rowspan="3">张三</th>错误：把人名当标题纵跨三行，实际应是<td rowspan="3">张三</td> -
colspan/rowspan值必须是正整数；设为0或负数，浏览器静默忽略，不报错但无效
复杂表格里，scope 和 headers 不是可选项
单层表头靠位置推断还能凑合，一旦有“部门 → 研发/测试”或多级时间维度（如“2024年 → Q1/Q2”），仅靠嵌套关系不可靠：
- 没
scope="col"的首行th，屏幕阅读器可能无法关联到下方整列td - 跨行表头建议配
id+headers，比如<th id="q1">Q1</th>对应<td headers="q1">120</td> -
scope="rowgroup"要配合tbody使用，不是随便加个th就能生效
最容易被跳过的是：哪怕你 CSS 把 th 改成细体左对齐，它的语义和可访问性能力依然完整；反过来，用 td 冒充 th，再怎么加样式也补不回结构契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
