在網頁設計中,表格的展示方式非常重要。一個美觀的表格可以讓網站更加吸引人,讓用戶更容易理解信息。在這里,我們將介紹如何使用CSS來美化表格。
/*定義表格的樣式*/ table { border-collapse: collapse; /*單元格合并*/ width: 100%; /*設置表格寬度為100%*/ } /*設置表頭的樣式*/ th { background-color: #f2f2f2; /*設置表頭背景顏色*/ color: #333; /*設置表頭文字顏色*/ font-weight: bold; /*設置表頭文字加粗*/ padding: 8px; /*設置表頭單元格內邊距*/ border: 1px solid #ccc; /*設置表頭單元格邊框*/ } /*設置單元格的樣式*/ td { padding: 8px; /*設置單元格內邊距*/ border: 1px solid #ccc; /*設置單元格邊框*/ } /*設置交替行的樣式*/ tr:nth-child(even) { background-color: #f2f2f2; /*設置偶數行背景顏色*/ } /*鼠標懸停樣式*/ tr:hover { background-color: #ddd; /*設置鼠標懸停行背景顏色*/ }
使用以上CSS樣式,可以制作出下面這樣的漂亮的表格展示:
名字 | 年齡 | 城市 |
---|---|---|
張三 | 22 | 北京 |
李四 | 27 | 上海 |
王五 | 30 | 廣州 |
趙六 | 25 | 深圳 |
以上就是如何使用CSS美化表格的方法,希望可以幫助大家制作出更加美觀的網頁。