在前端開發中，表格是常用的頁面元素之一。而為了增加表格交互的可視化效果，我們經常需要添加一些加載動畫。在這個過程中使用CSS樣式是最為簡便的方式。下面我們就來介紹CSS表格書寫樣式的加載動畫。

/* 創建一個表格容器 */
table {
border-collapse: collapse;
background-color: #fff;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
/* 設置表格中列的樣式 */
td {
text-align: center;
vertical-align: middle;
font-size: 16px;
padding: 10px;
border: 1px solid #ccc;
}
/* 添加動畫效果 */
@keyframes loading {
0% { background-color: #fff; }
50% { background-color: #f6f6f6; }
100% { background-color: #fff; }
}
/* 為表格行添加特定class，執行動畫 */
tr.loading td {
animation-name: loading;
animation-duration: 1s;
animation-iteration-count: infinite;
}
/* 在數據加載、表格渲染完成前添加loading class */
table.loading {
pointer-events: none;
}
/* 執行表格加載動畫 */
table.loading tr:not(:first-child) {
opacity: 0.5;
}
/* 移除動畫效果及loading class */
table.loaded {
animation: none;
pointer-events: initial;
}
table.loaded tr {
opacity: 1;
}

以上代碼中，我們首先創建了一個基本的表格容器，并為列設置了基本樣式。接著，在CSS中使用了@keyframes和animation屬性來定義動畫效果。為了方便控制，我們為表格行添加loading class，并在數據加載、表格渲染完成前對表格添加loading class來執行動畫。動畫完成后，我們再通過表格的loaded class來移除動畫效果及loading class。

使用以上代碼，我們可以輕松為表格添加簡單、優雅的加載動畫效果。這樣設計減少了頁面跳轉對用戶的影響，增加了頁面交互體驗。希望以上介紹能夠幫助大家更好地運用CSS樣式來為頁面添加更多動態效果。