在網(wǎng)頁制作中,表格(table)是一種常用的HTML元素。通過CSS樣式可以讓表格更加美觀、易讀。
給表格添加CSS樣式的方法如下:
/*表格整體樣式*/ table { width: 100%; /*表格寬度占滿整個容器*/ border-collapse: collapse; /*合并邊框,使表格看起來更整潔*/ } /*表頭樣式*/ th { font-size: 16px; /*字體大小*/ font-weight: bold; /*加粗*/ text-align: center; /*文本居中*/ padding: 10px; /*單元格內(nèi)邊距*/ background-color: #rgba(0, 0, 0, 0.5); /*背景色*/ color: #fff; /*字體顏色*/ } /*表格數(shù)據(jù)樣式*/ td { font-size: 14px; /*字體大小*/ text-align: center; /*文本居中*/ padding: 10px; /*單元格內(nèi)邊距*/ border: 1px solid #ccc; /*單元格邊框*/ } /*表格奇偶行變色*/ tr:nth-child(odd) td { background-color: #EEE; /*奇數(shù)行背景色*/ } tr:nth-child(even) td { background-color: #FFF; /*偶數(shù)行背景色*/ }
通過以上樣式設置,我們可以將表格整體樣式變得更加美觀,表頭加粗居中,表格數(shù)據(jù)添加邊框,以及表格奇偶行變色等等,讓表格更具有可讀性和醒目度。