在網頁設計中，CSS 表格的設計十分重要。好的表格可以提高網頁的可讀性和美觀度。下面將介紹如何設計 CSS 表格。 1. 表格基本結構 表格是由行和列組成的二維交叉網格，每個交叉點稱為單元格。在 CSS 中，表格由 table、tr、td 等標簽組成。

<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>

2. 表格樣式 需要設計的樣式有表格邊框、單元格間距、單元格背景、文字對齊等。 表格邊框可以用 border 屬性實現，如：

table {
border: 1px solid #ccc;
}

單元格間距可以用 border-spacing 屬性設置，如：

table {
border-spacing: 5px;
}

單元格背景可以用 background-color 屬性設置，如：

td {
background-color: #f5f5f5;
}

文字對齊可以用 text-align 屬性實現，如：

td {
text-align: center;
}

3. 斑馬線表格 為提高表格的可讀性，可以設計成斑馬線表格，即隔行變色。實現方法是用 nth-child 選擇器，如：

tr:nth-child(odd) {
background-color: #f5f5f5;
}

4. 鼠標移過高亮 當鼠標移過單元格時，可以讓它高亮顯示。方法是用 :hover 偽類，如：

td:hover {
background-color: #ddd;
}

5. 表格布局 有時，表格的寬度隨著瀏覽器窗口大小而變化，此時可以使用 CSS3 中的彈性盒模型（flexbox），如：

table {
display: flex;
flex-direction: column;
height: 100%;
}
tr {
flex: 1;
}
td {
flex: 1;
}

以上是設計 CSS 表格的基礎內容，可以根據實際需求進行修改和擴展。