CSS表格樣式是在網站設計中非常重要的一部分,通過一些簡單的CSS代碼,能夠讓網頁更加美觀和易于閱讀。在這里,我將分享一些簡單的CSS表格樣式,它們可以讓你的網站看起來更加專業和有序。
.table-style{ margin: auto; border-collapse: collapse; } .table-style td, .table-style th { border: 1px solid #dddddd; text-align: center; padding: 8px; } .table-style tr:nth-child(even){ background-color: #f2f2f2; } .table-style th { background-color: #dddddd; color: #000000; font-weight: bold; }
以上的CSS代碼可以讓你的表格看起來更加美觀和易讀。這些CSS樣式包括:
1. 設置表格樣式:設置表格的邊框為折疊,可以使表格看起來更加緊湊。
.table-style { margin: auto; border-collapse: collapse; }
2. 設置單元格樣式:設置單元格的邊框,文字居中顯示,以及填充間距。
.table-style td, .table-style th { border: 1px solid #dddddd; text-align: center; padding: 8px; }
3. 設置表格偶數行的背景顏色:可以通過設置表格中奇偶行的背景顏色來使其更加易于閱讀。
.table-style tr:nth-child(even){ background-color: #f2f2f2; }
4. 設置表格標題樣式:設置表格標題的背景顏色和字體加粗等樣式。
.table-style th { background-color: #dddddd; color: #000000; font-weight: bold; }
以上的CSS代碼只是表格樣式的基礎部分,你可以根據自己的需求進行修改和擴展。