在網頁設計中,表格是常用的元素之一,通過CSS可以輕松地實現各種復雜的表格樣式。下面是一篇簡單的教程,介紹如何在CSS中建立表格。
table, td, th { border: 1px solid #ccc; border-collapse: collapse; padding: 5px; } th { text-align: center; background: #f1f1f1; } tr:nth-child(even) { background: #f9f9f9; } tr:hover { background: #e6e6e6; }
首先,我們需要定義table, td和th這三個元素的樣式。對于table,我們添加了一個邊框,并將邊框合并,使得表格看起來更整潔;對于td和th,我們添加了一些內邊距,使得內容和邊框之間有一定的距離。
接下來,我們為th定義了一些特殊樣式。我們將文字居中,背景設為灰色,以突出表頭的重要性。
然后,我們想要為表格的每一行設置不同的背景顏色。我們使用nth-child選擇器選中每個偶數行,并將背景設為淺灰色。這樣可以讓表格的每行更加醒目。
最后,我們為表格添加鼠標懸停效果。當鼠標懸停在表格上時,我們將背景設置為淡灰色,以提升用戶體驗。
通過以上步驟,我們就可以輕松籌備一個漂亮的表格。當然,我們還可以添加更多的樣式和效果來進一步美化表格。