在網頁設計中,表格是一項非常重要的內容展示方式。而要讓表格清晰易懂,就需要運用到CSS樣式的設置。
下面我們就來分別介紹一些實踐過的CSS表格樣式:
/* 表格基礎樣式 */ table { border-collapse: collapse;//合并單元格邊框 width: 100%; //表格寬度設置為100% text-align: center; //文字居中 } /* 表格邊框樣式 */ table { border: 1px solid #ccc;//整個表格邊框為1px的實線,顏色為灰色 } /* 表格奇偶行變色 */ tr:nth-child(even) { background: #f8f8f8;//偶數行背景顏色為淺灰色 } /* 表格懸停高亮 */ tr:hover { background: #f5f5f5;//鼠標懸停時,背景顏色改變?yōu)闇\淺灰 } /* 單元格邊框樣式 */ td, th { border: 1px solid #ddd;//單元格邊框為1px實線,顏色為淡灰 padding: 8px;//單元格內邊距為8px } /* 表頭樣式 */ th { background: #333;//表頭背景顏色為深灰 color: #fff;//表頭文字顏色為白色 font-weight: bold;//表頭文字加粗 }
以上就是一些常用的CSS表格樣式設置,當然還有很多更復雜的樣式需要根據實際需求進行設置。在設計網頁時,靈活應用CSS表格樣式可以讓網頁更加美觀、易讀和專業(yè)。
上一篇mysql 查詢是第幾個
下一篇css表格的單雙