如何使用TH标签定义表头？自动实现加粗居中显示效果-html教程-PHP中文网

标签默认加粗居中，因浏览器ua样式设定了font-weight:bold和text-align:center；必须置于或第一行中，不可在内或脱离表格结构使用，否则退化为普通内联元素。

如何使用th标签定义表头？自动实现加粗居中显示效果

TH 标签默认就加粗居中，不需要额外写 CSS

浏览器对 <th> 的 UA 样式（User Agent Stylesheet）默认设置了 <code>font-weight: bold 和 text-align: center，所以只要用对标签，效果自然出现。关键不是“怎么实现”，而是“别误用”——比如把 <th> 放在 <code><tbody> 里，或套在 <code><div> 外面，都会让样式失效。 <h3>必须放在 THEAD 或第一行 TR 中才有效</h3> <p><code><th> 的语义和渲染行为强依赖表格结构。脱离上下文，它就退化为普通内联元素。 <ul> <li>✅ 正确：放在 <code><thead><tr> <th>姓名</th> <th>年龄</th> </tr></thead> 中

✅ 也可接受：省略

<thead>，但确保是表格第一行的 <code><tr>（即 <code><table><tr><th>...）
<li>❌ 错误：放在 <code><tbody> 的任意 <code><tr> 里，此时多数浏览器按 <code><td> 渲染，无加粗居中
<li>❌ 错误：用 <code><th scope="row"> 当列头用（<code>scope

值错配会破坏可访问性，也影响部分屏幕阅读器识别）

遇到不加粗/不居中？先检查这三件事

不是浏览器坏了，大概率是结构或覆盖样式的问题。

检查是否被 CSS 覆盖：用开发者工具看 <th> 元素的 computed styles，重点查 <code>font-weight 是否被设成 normal、text-align 是否被改成 left 或 start
确认父级是 <tr>，且该 <code><tr> 没被包裹在 <code><tbody> 内（除非你明确用了 <code><caption></caption> 或 <colgroup></colgroup> 等特殊结构）
避免混用 <th> 和 <code><td> 在同一行又没分清作用域——比如一行里既有列头 <code><th> 又有行头 <code><th scope="row">，容易让渲染逻辑混乱 <h3>需要微调样式时，优先用 class 而非全局重置</h3> <p>直接给所有 <code><th> 加 CSS（如 <code>th { text-align: left !important; }）会破坏语义一致性，也影响响应式表格或打印样式。
- 推荐做法：加 class，例如 <th class="header-left">，再写 <code>.header-left { text-align: left; font-weight: 600; }
- 注意：如果要用 font-weight: 600 替代 bold，得确认字体支持该字重，否则可能回退成 normal
- 移动端表格常需左对齐表头，这时用 class 控制比改 UA 默认更安全