th和td对齐方式必须分开控制：th默认加粗居中、td默认左对齐，但属浏览器默认样式；全局text-align会覆盖二者，应分别设置th为center、td为left，并显式声明vertical-align等关键样式以确保兼容性。
table中th和td的对齐方式必须分开控制
表头（th）默认是加粗+居中，但这个行为来自浏览器默认样式，不是HTML规范强制的；内容单元格（td）默认左对齐。一旦你加了全局 text-align: center，两者就全被拉平了——这是最常踩的坑。
正确做法是分别给 th 和 td 设置样式，不能只写一条通用规则。
-
th加text-align: center，确保表头文字水平居中 -
td显式设为text-align: left，覆盖浏览器默认（避免被父级样式意外继承） - 如果用了
border-collapse: collapse，记得检查padding是否影响视觉对齐感
内联样式 vs CSS类：哪种更适合维护
内联写法快，但一改全改；用CSS类更可控，尤其当页面有多个表格时。
比如这样写类名，语义清晰且可复用：
立即学习“前端免费学习笔记（深入）”；
<style>
.table-header-center th {
text-align: center;
}
.table-content-left td {
text-align: left;
}
</style>
然后在表格上加两个类：<table class="table-header-center table-content-left">
- 不推荐把
th和td的样式混在一个选择器里（如table th, table td），容易误伤 - 如果表格嵌套在响应式容器中，注意
min-width或white-space: nowrap可能让左对齐内容“撑开”列宽，反而看起来偏右
vertical-align 影响垂直居中效果
表头文字居中不只是左右问题，上下也得稳住。默认 th 的 vertical-align 是 middle，但 td 也是 middle —— 这会导致内容看起来“太高”，尤其配图标或小字号时。
想让 td 内容顶部对齐、文字紧贴单元格上边，可以加：
td { vertical-align: top; }- 或者更保守地只针对含文本的列：
td:not([colspan]) { vertical-align: top; } - 避免用
valign="top"这种过时属性，它在HTML5中已废弃，且不支持CSS优先级覆盖
移动端适配时容易忽略的细节
在手机上，表格常横向滚动，此时 th 居中 + td 左对齐的组合会暴露一个问题：当列宽被压缩后，左对齐的文字可能紧贴左边框，而居中的表头却留白多，视觉失衡。
缓解方法有限但有效：
- 给
th加一点padding-left和padding-right（比如0.75em），比纯居中更耐压缩 - 用
white-space: normal替代nowrap，允许换行，避免单字撑裂布局 - 真要保格式，宁可加横向滚动容器（
<div style="overflow-x: auto"><table>...</table></div>），也别强行缩列宽
真正难处理的不是怎么写居中，而是当用户放大字体、开启系统粗体、或禁用CSS时，那些靠默认行为“侥幸”工作的表格立刻露馅——所以关键样式最好都显式声明，别赌浏览器。
