必须使用<th>定义表头而非仅靠CSS样式模拟，因其承载语义、可访问性及结构化数据功能；需正确嵌套于<tr>内，配合scope、colspan/rowspan、<thead>等确保逻辑准确与兼容性。
表头必须用 <th>，不能只靠CSS加粗居中
用 <td> 加 style="font-weight: bold; text-align: center;" 看起来像表头，但语义错误——屏幕阅读器不会把它当标题读，导出Excel时可能丢失列名，自动化测试脚本也容易定位失败。浏览器默认把 <th> 渲染为粗体居中，这只是UA样式，不是它的本质作用。
真正关键的是：<th> 告诉浏览器“这是描述下方/右侧数据的标题”，而 <td> 只是“这里放数据”。哪怕你用CSS把 <th> 改成左对齐、细字体，它的语义和可访问性能力依然保留。
-
<th>必须嵌套在<tr>里，不能直接放在<table>下（否则触发“td outside tr”类解析警告） - 常见错误：JS动态拼接表格时漏写
<tr>，比如'<th>姓名</th><th>年龄</th>'直接塞进<table>，结果DOM结构错乱 - 多级表头（如“部门”下分“研发”“测试”）必须用
<th>+colspan/rowspan，不能用<td>模拟
scope 属性决定屏幕阅读器怎么读，不设等于盲区
没有 scope 的 <th>，屏幕阅读器可能无法准确关联它和对应的数据单元格。比如第一行三个 <th>，如果没声明 scope="col"，读到第二行第二个 <td> 时，它可能只报“25”，而不报“年龄：25”。
-
scope="col"：该表头对应整列数据（最常用，用于首行标题） -
scope="row"：该表头对应整行数据（用于首列标题，如“张三”作为行名） -
scope="colgroup"或scope="rowgroup"：配合<colgroup>或<tbody>使用，适用复杂分组场景 - 避免滥用
scope：比如在中间某行突然插一个<th scope="row">，但前后没有逻辑分组，反而干扰辅助技术
colspan 和 rowspan 在 <th> 里用法一样，但语义不能反
colspan 让一个表头横跨多列，rowspan 让它纵跨多行——语法相同，但意图必须清晰。误用会破坏数据维度映射。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<th colspan="2">联系方式</th>（合并两列标题，“电话”和“邮箱”共属“联系方式”） - 危险：
<th rowspan="3">张三</th>（把人名当表头纵跨三行，实际应是<td rowspan="3">，否则语义上变成“张三”是三行数据的标题） -
colspan/rowspan值必须是正整数；设为0或负数会被浏览器忽略，不报错但无效 - 跨行表头若涉及多层结构（如“2024年”下分“Q1”“Q2”），需配合
id和headers属性显式绑定，仅靠位置推断不可靠
复杂表格里，<thead> 和 <tbody> 不是装饰，是结构契约
只用 <tr> 堆砌表头和数据，会让表格失去逻辑分层。浏览器、打印样式、滚动固定表头等功能都依赖 <thead> 显式声明哪些行是标题区。
-
<thead>必须包含至少一个<tr>，里面只能是<th>（或极少数场景下含<td>，但非常规） -
<tbody>包裹所有数据行，<tfoot>（如有）应放在最后；顺序错乱（如<tbody>在<thead>前）会导致渲染异常或可访问性支持失效 - CSS中用
thead th选择器比泛用th更安全，避免误样式化行内<th scope="row"> - 服务端渲染或模板引擎生成表格时，别省略
<thead>标签——即使内容空，也要占位，否则客户端JS操作DOM易出错
<th> 用错位置、漏 scope、缺 <thead>，对残障用户、SEO爬虫、数据提取工具来说，这张表就已经“不可读”了。 
