必须用css显式设置th的font-weight: bold、text-align: center和vertical-align: middle,因为浏览器ua样式不可靠,且语义上不可被替代。

直接用 <th> 就能实现基础加粗与居中,但浏览器默认行为不可靠,必须配合 CSS 显式控制。
<h3>为什么 <code><th> 默认加粗居中不保险
<p>虽然所有主流浏览器对 <code><th> 都有加粗+居中渲染,但这是 UA 样式(user agent stylesheet)决定的,不是规范强制要求。某些定制内核、旧版 IE 兼容模式、或重置样式表(如 normalize.css)可能覆盖掉这些默认值。
<ul>
<li>
<code>font-weight 可能被设为 normal,导致不加粗
text-align 可能被设为 left,导致左对齐vertical-align 在某些布局下会失效必须写的 CSS 样式组合
仅靠 HTML 标签无法保证视觉一致性,以下三行 CSS 是最小可靠配置:
<style>
th {
font-weight: bold;
text-align: center;
vertical-align: middle;
}
</style>
-
font-weight: bold替代依赖 UA 的加粗逻辑,避免被 reset 干扰 -
text-align: center明确水平居中,不依赖浏览器默认 -
vertical-align: middle确保单元格内容在高度方向居中(尤其当height或line-height被设置时)
colspan 和 rowspan 下的对齐陷阱
合并单元格后,text-align 和 vertical-align 依然生效,但容易被忽略其作用范围:
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
-
<th colspan="2">姓名</th>:文本仍按text-align: center居中于合并后的总宽度内 -
<th rowspan="3">序号</th>:文本垂直居中于三行总高度,而非单行高度 - 如果父
<tr> 设置了 <code>height,而<th> 没设 <code>vertical-align,内容可能贴顶显示语义优先:别用
<td> + CSS 冒充 <code><th> <p>即使你把 <code><td> 加粗居中,屏幕阅读器和搜索引擎仍把它当普通数据单元格处理: <ul> <li>辅助技术无法识别列标题关系,表格导航混乱</li> <li>SEO 无法提取结构化标题信息</li> <li>未来维护者看到 <code><td class="header"> 会困惑语义意图 <p>真正需要突出的,是语义+样式双重明确——<code><th> 是标签,CSS 是呈现,缺一不可。</th>
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










