在HTML中，表格表头通常使用<th>标签定义。要设置表头颜色，可以通过CSS的background-color属性直接为<th>元素添加样式。确保颜色与表格内容对比度高，提升可读性，跟着小编一起详细了解下html 表格表头颜色怎么设置的吧。
一、设置表格表头颜色
使用 <th> 标签定义表头，并通过 CSS 的 background-color 属性设置颜色：
html<style>th {background-color: #4CAF50; /* 表头背景色 */color: white; /* 表头文字颜色 */}</style><table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr></table>
二、实现表格交替行颜色
通过 CSS 的 :nth-child(even/odd) 选择器为偶数行/奇数行设置不同颜色：
html<style>tr:nth-child(even) {background-color: #f2f2f2; /* 偶数行颜色 */}tr:nth-child(odd) {background-color: #ffffff; /* 奇数行颜色 */}/* 鼠标悬停效果(可选) */tr:hover {background-color: #ddd;}</style><table border="1"><tr><th>产品</th><th>价格</th></tr><tr><td>苹果</td><td>5元</td></tr><tr><td>香蕉</td><td>3元</td></tr><tr><td>橙子</td><td>4元</td></tr></table>
完整代码示例
html<!DOCTYPE html><html><head><style>table {width: 50%;border-collapse: collapse;}th {background-color: #4CAF50;color: white;padding: 8px;}td {padding: 8px;text-align: center;}tr:nth-child(even) { background-color: #f2f2f2; }tr:hover { background-color: #ddd; }</style></head><body><table border="1"><tr><th>月份</th><th>销售额</th></tr><tr><td>1月</td><td>1000</td></tr><tr><td>2月</td><td>1500</td></tr><tr><td>3月</td><td>1200</td></tr></table></body></html>
关键点说明
表头颜色：通过 th 选择器单独设置
交替行颜色：
even 表示偶数行(2,4,6...)
odd 表示奇数行(1,3,5...)
增强效果：
border-collapse: collapse 合并边框
:hover 添加鼠标悬停高亮
兼容性：现代浏览器均支持这些 CSS 选择器
这种方法比传统使用 <tr> 更简洁，且无需手动为每行添加类名。
在HTML中设置表格表头颜色可通过CSS为<th>元素添加样式实现。以上就是详细的步骤介绍，如需响应式设计，可结合媒体查询调整表头样式，有需要的小伙伴赶紧学习起来吧。
