今天我們來學習一下如何使用CSS與HTML分離來設置表格。表格是Web設計中必不可少的元素，但是當表格過于簡單時，過多的樣式會讓頁面顯得混亂。因此，使用CSS與HTML分離可以更好地組織樣式，使文檔結構更清晰，代碼更易維護。
首先，我們需要在HTML文件中創建表格。使用
標簽來創建表格，、、| 、 | 和等標簽來定義表格結構，如下所示：<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Female</td>
</tr>
</tbody>
</table> 接下來，我們使用CSS來設置表格樣式。我們可以在一個單獨的CSS文件中編寫樣式，也可以將樣式放在HTML文件的標簽中。下面是一個CSS示例：table {
border-collapse: collapse; /* 合并表格邊框 */
width: 100%; /* 表格100%寬度 */
}
th, td {
padding: 8px; /* 填充表格單元格 */
text-align: left; /* 左對齊文本 */
}
th {
background-color: #f2f2f2; /* 設置表頭背景顏色 */
}
tr:nth-child(even){ /* 隔行變色 */
background-color: #f2f2f2;
}
td {
border-bottom: 1px solid #ddd; /* 給表格單元格下邊框設置樣式 */
}最后，我們將CSS文件與HTML文件鏈接在一起：<link rel="stylesheet" type="text/css" href="style.css"> 至此，我們已經完成了CSS與HTML分離設置表格。通過此方法，我們可以更好地組織樣式，使代碼更易維護，同時使頁面結構更清晰。
|
