表格是Web開發中經常需要使用的元素,合理的使用CSS樣式可以讓表格的展示更加美觀、易于閱讀。下面就來介紹一下CSS給HTML表格布局設置的方法。
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>20</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>18</td> <td>女</td> </tr> </tbody> </table>
以上是一個基本的HTML表格結構,接下來就來介紹如何用CSS樣式來美化表格。
1. 設置表格邊框
table { border-collapse: collapse; /*將單元格邊框合并為一個*/ border: 1px solid #ccc; /*單元格邊框樣式*/ } th, td { border: 1px solid #ccc; /*標題和單元格邊框樣式*/ padding: 8px; /*單元格內邊距*/ }
2. 設置表格寬度和對齊方式
table { width: 100%; /*表格寬度*/ text-align: center; /*內容居中對齊*/ } th { text-align: center; /*標題居中對齊*/ }
3. 設置表格背景顏色和字體樣式
table { background-color: #f5f5f5; /*表格背景顏色*/ font-family: "微軟雅黑"; /*表格字體*/ font-size: 14px; /*表格字體大小*/ }
通過以上CSS樣式的設置,可以讓表格更加美觀、易于閱讀。