在HTML中，表格表頭通常使用<th>標(biāo)簽定義。要設(shè)置表頭顏色，可以通過(guò)CSS的background-color屬性直接為<th>元素添加樣式。確保顏色與表格內(nèi)容對(duì)比度高，提升可讀性，跟著小編一起詳細(xì)了解下html 表格表頭顏色怎么設(shè)置的吧。
一、設(shè)置表格表頭顏色
使用 <th> 標(biāo)簽定義表頭，并通過(guò) CSS 的 background-color 屬性設(shè)置顏色：
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>
二、實(shí)現(xiàn)表格交替行顏色
通過(guò) CSS 的 :nth-child(even/odd) 選擇器為偶數(shù)行/奇數(shù)行設(shè)置不同顏色：
html<style>tr:nth-child(even) {background-color: #f2f2f2; /* 偶數(shù)行顏色 */}tr:nth-child(odd) {background-color: #ffffff; /* 奇數(shù)行顏色 */}/* 鼠標(biāo)懸停效果(可選) */tr:hover {background-color: #ddd;}</style><table border="1"><tr><th>產(chǎn)品</th><th>價(jià)格</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>
關(guān)鍵點(diǎn)說(shuō)明
表頭顏色：通過(guò) th 選擇器單獨(dú)設(shè)置
交替行顏色：
even 表示偶數(shù)行(2,4,6...)
odd 表示奇數(shù)行(1,3,5...)
增強(qiáng)效果：
border-collapse: collapse 合并邊框
:hover 添加鼠標(biāo)懸停高亮
兼容性：現(xiàn)代瀏覽器均支持這些 CSS 選擇器
這種方法比傳統(tǒng)使用 <tr> 更簡(jiǎn)潔，且無(wú)需手動(dòng)為每行添加類名。
在HTML中設(shè)置表格表頭顏色可通過(guò)CSS為<th>元素添加樣式實(shí)現(xiàn)。以上就是詳細(xì)的步驟介紹，如需響應(yīng)式設(shè)計(jì)，可結(jié)合媒體查詢調(diào)整表頭樣式，有需要的小伙伴趕緊學(xué)習(xí)起來(lái)吧。
