CSS表格嵌套起來很方便,但是對于很多初學者來說表格邊框和間距設置非常棘手,因此學會如何掌握這些常見的樣式屬性非常重要。
table { border-collapse: collapse; /* 邊框合并,邊框顏色不同的時候是必須設置的 */ border-spacing: 0; /* 單元格之間的距離為0,使表格更緊湊 */ width: 100%; /* 這里是表格的寬度 */ } th, td { padding: 8px; /* 設置單元格內邊距(填充) */ text-align: left; /* 垂直居中 */ border-bottom: 1px solid #ddd; /* 底部分割線,顏色可以自己定義 */ } th { background-color: #f2f2f2; /* 表頭背景顏色 */ color: #37474f; /* 表頭字體顏色 */ } tr:nth-child(even) { background-color: #f2f2f2; /* 偶數行的背景顏色 */ } tr:hover { background-color: #ddd; /* 鼠標移到行上,背景顏色改變 */ }
通過上述CSS樣式設置,在網頁上創建美觀的表格現在不再是難事。您也可以自由發揮,定義您想要的單元格邊框和間距,以及其他屬性。CSS表格的樣式屬性列表并不止以上這些,學習它們將會讓您在網頁制作中更加得心應手。