在開發網頁時,表格是常用的元素之一,而表格的美觀程度也是決定整個頁面設計好壞的重要因素之一。而CSS中也提供了豐富的表格樣式來滿足不同的需求。
table { border-collapse: collapse; /* 合并表格邊框 */ margin: 0 auto; /* 居中顯示 */ } td, th { padding: 10px; /* 單元格內邊距 */ border: 1px solid #ccc; /* 單元格邊框 */ text-align: center; /* 文字居中 */ } th { font-weight: bold; /* 加粗表頭 */ background-color: #f5f5f5; /* 背景色 */ } tr:nth-child(2n) { background-color: #f5f5f5; /* 隔行變色 */ }
上述代碼是一個基本的表格樣式,在此基礎上可以根據需求進行調整和擴展。其中,border-collapse可以讓表格邊框合并,讓表格更加整潔;padding可以調整單元格內邊距,讓表格內容更加美觀;text-align可以讓單元格中的文字居中對齊;tr:nth-child(2n)可以實現隔行變色的效果,讓表格更加易讀。
除此之外,還有很多其他的表格樣式可供選擇,例如設置表頭的顏色、邊框寬度、單元格寬度等,都可以通過CSS來輕松實現。使用合適的表格樣式,可以大大提高網頁的美觀程度,也為用戶提供更加友好的使用體驗。
上一篇HTML5插件播放器代碼
下一篇mysql5免安裝版本