CSS樣式制作表格

表格在網頁設計中扮演著非常重要的角色，無論是展示數據還是布局排版，都需要借助表格來完成。而使用CSS樣式來美化表格，可以讓網頁更加美觀、清晰。

下面我們通過例子來了解如何使用CSS樣式來制作表格:

<style type="text/css">
table {border-collapse: collapse;width: 100%;}
th, td {text-align: left;padding: 8px;}
th {background-color: #666;color: white;}
tr:nth-child(even){background-color: #f2f2f2}
tr:hover {background-color: #ddd;}
</style>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>19</td>
<td>男</td>
</tr>
</table>

上述代碼的作用是：

1. 設置table表格的布局，合并邊框，設置寬度為100%。

2. 設置表格中th（表頭）和td（表格內容）中文本的對齊方式和內邊距。

3. 設置表頭背景顏色為黑色，文字顏色為白色。

4. 設置表格中偶數行的背景色和鼠標懸停時的背景色。

運行上述代碼，可以得到一個美觀、清晰的表格。通過調整CSS樣式，可以根據需要設計出各種風格的表格。