是语义化表头标签，必须用于标题单元格而非 ；需显式用 css 设置 font-weight: bold 和 text-align: center，并推荐配合 使用以提升结构与可维护性。
<th> 标签就是专门用来定义表头单元格的，语义明确、结构清晰。它默认在多数浏览器中呈现为加粗且水平居中，但<strong>不能依赖这个默认表现</strong>——因为这是浏览器自带的用户代理样式，不是 HTML 或 CSS 规范强制要求的。<h3>表头单元格必须用 <code><th>，不能用 <code><td> 代替<ul><li><code><th> 是语义化标签，告诉浏览器和辅助技术“这是标题”，对屏幕阅读器、SEO、表格逻辑结构都至关重要 <li>即使视觉上想让它和 <code><td> 一样，也应保留 <code><th> 并用 CSS 调整样式，而不是换成 <code><td> <h3>加粗和居中必须显式声明 CSS</h3>
<p>仅写 <code><th>姓名</th> 不足以保证所有环境下的加粗+居中效果。需配合以下 CSS（推荐写在外部样式表或 <style></style> 中）：
th {
font-weight: bold;
text-align: center;
}
常见遗漏点：
- 只写了
text-align: center却漏掉font-weight: bold→ 某些旧版 Safari 或邮件客户端里文字不加粗 - 使用了重置 CSS（如 Normalize.css 或某些 UI 框架）后，全局清除了
<th> 的默认加粗 → 必须手动补回 <li>自定义 Web 字体未加载对应字重（比如只加载了 <code>font-weight: 400，没加载700）→ 显示为普通粗细
更安全的做法：给特定列/行加类名控制
避免全局影响，也方便响应式调整：
<th class="col-name">姓名</th> <th class="col-age">年龄</th>
.col-name, .col-age {
font-weight: bold;
text-align: center;
}
居中效果异常？检查这几个地方
-
单元格太窄导致文字换行：小屏下
text-align: center仍生效，但每行单独居中，视觉上偏移。可加：th { white-space: nowrap; /* 防止短表头意外换行 */ min-width: 100px; /* 保障基本宽度，再配合居中 */ } -
父级样式覆盖：比如
table { font-weight: normal !important; }会压掉<th> 的加粗，需提高选择器权重或修正源头 <li> <strong><code>display: flex/grid模拟表格时：<th> 的语义还在，但默认样式完全失效，必须手动设置全部样式（包括 <code>font-weight、text-align、甚至display: table-cell等）推荐结构：搭配
<thead> 提升语义与可维护性<pre class="brush:html;toolbar:false;"></pre> <table> <thead><tr> <th>序号</th> <th>产品名称</th> <th>单价</th> </tr></thead> <tbody><tr> <td>1</td> <td>笔记本</td> <td>¥5999</td> </tr></tbody> </table> <p>这样既符合语义规范，也便于后续用 CSS 针对 <code><thead> 统一控制表头样式，比如固定表头、添加背景色等。<p>不复杂但容易忽略</p> </thead>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
