<th>标签默认加粗居中，因浏览器UA样式设定了font-weight:bold和text-align:center；必须置于<thead>或第一行<tr>中，不可在<tbody>内或脱离表格结构使用，否则退化为普通内联元素。
TH 标签默认就加粗居中，不需要额外写 CSS
浏览器对 <th> 的 UA 样式（User Agent Stylesheet）默认设置了 font-weight: bold 和 text-align: center，所以只要用对标签，效果自然出现。关键不是“怎么实现”，而是“别误用”——比如把 <th> 放在 <tbody> 里，或套在 <div> 外面，都会让样式失效。
必须放在 THEAD 或第一行 TR 中才有效
<th> 的语义和渲染行为强依赖表格结构。脱离上下文，它就退化为普通内联元素。
- ✅ 正确：放在
<thead><tr><th>姓名</th><th>年龄</th></tr></thead>中 - ✅ 也可接受：省略
<thead>，但确保是表格第一行的<tr>（即<table><tr><th>...） - ❌ 错误：放在
<tbody>的任意<tr>里，此时多数浏览器按<td>渲染，无加粗居中 - ❌ 错误：用
<th scope="row">当列头用（scope值错配会破坏可访问性，也影响部分屏幕阅读器识别）
遇到不加粗/不居中？先检查这三件事
不是浏览器坏了，大概率是结构或覆盖样式的问题。
- 检查是否被 CSS 覆盖：用开发者工具看
<th>元素的 computed styles，重点查font-weight是否被设成normal、text-align是否被改成left或start - 确认父级是
<tr>，且该<tr>没被包裹在<tbody>内（除非你明确用了<caption>或<colgroup>等特殊结构） - 避免混用
<th>和<td>在同一行又没分清作用域——比如一行里既有列头<th>又有行头<th scope="row">，容易让渲染逻辑混乱
需要微调样式时，优先用 class 而非全局重置
直接给所有 <th> 加 CSS（如 th { text-align: left !important; }）会破坏语义一致性，也影响响应式表格或打印样式。
- 推荐做法：加 class，例如
<th class="header-left">，再写.header-left { text-align: left; font-weight: 600; } - 注意：如果要用
font-weight: 600替代bold，得确认字体支持该字重，否则可能回退成normal - 移动端表格常需左对齐表头，这时用 class 控制比改 UA 默认更安全
<th> 当“加粗文字容器”滥用，才是加粗居中失效的真正原因。语义对了，样式基本不用操心。 
