使用 CSS 動態增加表格可以讓網頁更加動態和生動，那么該怎樣做呢？我們可以使用 CSS 偽類和屬性選擇器來實現這個目標。

table {
border-collapse: collapse; /* 合并表格邊框 */
}
table td {
border: 1px solid #ccc; /* 單元格邊框 */
padding: 0.5em 1em; /* 單元格內邊距 */
}
/* 隔行變色 */
table tr:nth-child(even) td {
background-color: #f5f5f5;
}
/* 首行加粗 */
table tr:first-child td {
font-weight: bold;
}
/* 懸停高亮 */
table td:hover {
background-color: #eee;
}

以上是基本的表格樣式，接下來我們就可以動態增加表格了：

// 創建表格對象
const table = document.createElement('table');
// 創建表頭
const thead = document.createElement('thead');
const tr = document.createElement('tr');
const th1 = document.createElement('th');
const th2 = document.createElement('th');
th1.textContent = '姓名';
th2.textContent = '年齡';
tr.append(th1, th2);
thead.append(tr);
// 創建表格內容
const tbody = document.createElement('tbody');
const data = [
{ name: '小明', age: 18 },
{ name: '小紅', age: 20 },
{ name: '小剛', age: 22 },
];
data.forEach(item =>{
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = item.name;
td2.textContent = item.age;
tr.append(td1, td2);
tbody.append(tr);
});
// 把表頭和表格內容添加到表格中
table.append(thead, tbody);
// 把表格添加到頁面中
document.body.append(table);

通過以上代碼，我們實現了一個動態增加的基礎表格。