在網頁設計中,表格經常被用于展示數據或布局結構。使用CSS可以輕松地創建自定義的表格模板,提高設計的效率和美觀程度。
/* 表格樣式 */ .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: 10px; text-align: center; border: 1px solid #ccc; } /* 表頭樣式 */ .table thead { background-color: #f5f5f5; } .table th { font-weight: bold; } /* 偶數行樣式 */ .table tbody tr:nth-child(even) { background-color: #f9f9f9; } /* 鼠標懸停樣式 */ .table tbody tr:hover { background-color: #e0e0e0; }
這段代碼定義了一個.table類,用于設置表格的樣式。表格使用100%的寬度,并去除了默認的邊框。表頭和單元格都有10px的內邊距,并且水平居中對齊,同時添加了細邊框。表頭有粗體字體,表格的偶數行設置了淺色的背景色,鼠標懸停在單元格上時會高亮顯示。
可以根據自己的需求修改這些樣式,例如增加字體大小、調整表格的顏色等等。同時,也可以使用偽類選擇器(如:first-child)來更改某些特定行或單元格的樣式。