CSS可以很方便地制作表格,讓數據呈現更加清晰。下面介紹一些常用的表格樣式。
table{ border-collapse:collapse; /*合并邊框*/ width:100%; /*表格寬度*/ } td,th{ border:1px solid #333; /*單元格邊框*/ padding:10px; /*單元格內邊距*/ text-align:center; /*文字居中*/ } th{ background-color:#333; /*表頭顏色*/ color:#fff; /*表頭文字顏色*/ } tr:nth-child(odd){ background-color:#ccc; /*隔行變色*/ }
以上代碼設置了表格、單元格的邊框樣式、內邊距,以及文字對齊方式。表頭的背景色和文字顏色也做了特別的設置。另外,使用了偽類選擇器來隔行變色。下面是一個簡單的表格示例:
姓名 | 年齡 | 性別 |
---|---|---|
小明 | 20 | 男 |
小紅 | 18 | 女 |
小李 | 22 | 男 |
以上代碼設置了一個包含表頭和三行數據的表格,使用了<th>和<td>標簽分別表示表頭和數據單元格。在實際應用中,可以根據需要自行添加更多的行和列,并根據具體情況設置相應樣式。
上一篇css如何使盒子整齊排列
下一篇css如何使圖片上下居中