統計表是網站中常用的一種數據展示方式,精美的表格樣式顯得尤為重要。在網頁設計中,CSS樣式是控制頁面表現的關鍵,以下是關于統計表CSS樣式怎么寫的詳細介紹。
table { border-collapse: collapse; /*合并表格邊框*/ width: 100%; /*寬度占滿整個父元素*/ margin-bottom: 20px; /*下方間距*/ background-color: #fff; /*背景顏色*/ color: #333; /*文字顏色*/ text-align: center; /*文字居中*/ } th { padding: 10px 15px; /*表頭上下間距,左右間距*/ color: #fff; /*表頭文字顏色*/ background-color: #333; /*表頭背景顏色*/ text-align: center; /*居中對齊*/ font-size: 14px; /*字體大小*/ } td { border: 1px solid #ddd; /*邊框顏色*/ padding: 10px 15px; /*上下間距,左右間距*/ text-align: center; /*居中對齊*/ font-size: 14px; /*字體大小*/ } tr:nth-child(even) { /*偶數行的樣式*/ background-color: #F2F2F2; /*背景顏色*/ }
以上代碼中,table元素設置了表格的一些基本樣式,如邊框合并、寬度、背景色等。th元素是表頭樣式的設置,包括上下、左右間距、文字顏色和居中對齊等。td元素是表格單元格的樣式設置,包括上下、左右間距、文字居中對齊和字體大小等。
多數情況下,我們需要對表格進行隔行變色的處理,這里我們使用nth-of-type()偽類選擇器來設置偶數行的背景顏色,讓統計表更加美觀。
總之,合理、美觀地設置統計表CSS樣式,不僅能讓數據信息更好的呈現,還能讓用戶體驗更佳,提升網站整體品質。