在前端開發(fā)中，如何設計優(yōu)雅、美觀的表格一直是一個重要的話題。本文將對前端視頻第二部中關于CSS表格的學習內(nèi)容做一個總結和分享。

table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #ccc;
}
th {
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}

首先，表格樣式的設計需要注意布局和排版。我們可以通過CSS設置表格的寬度，以及控制表格元素之間的間距和間隙。另外，在表格中設置th（表頭）和td（單元格）的樣式，可以讓表格更加美觀、清晰。

以上代碼中，我們通過border-collapse屬性和border-spacing屬性控制單元格間隔和邊框的樣式，使表格更加整潔、緊湊，并且使用了CSS偽類選擇器:nth-child和:hover，讓表格更具有交互性和視覺效果。

表格的設計是前端開發(fā)中的一個重要環(huán)節(jié)，除了基本的布局和樣式控制，還需要考慮數(shù)據(jù)的展示和交互方式，如分頁、排序、過濾等功能，這些內(nèi)容我們將在以后的學習中逐步掌握。