在網(wǎng)頁設計中，表格是最基本的布局方式之一。但是，當表格布局過于復雜時，使用HTML表格布局就顯得力不足。這時候，CSS表格布局就可以派上用場。

display: table; /* 定義表格容器 */
width: 100%; /* 表格長度為頁面寬度 */
height: 100vh; /* 表格高度為頁面高度 */

CSS表格布局使用display屬性來定義表格容器。與HTML表格不同的是，CSS表格布局可以更加自由地定義表格的行、列和單元格。接下來，我們來看看如何使用CSS表格布局來設計一個簡單的頁面。

.container {
display: table; /* 定義表格容器 */
width: 100%; /* 表格長度為頁面寬度 */
height: 100vh; /* 表格高度為頁面高度 */
}
.row {
display: table-row; /* 定義表格行 */
}
.cell {
display: table-cell; /* 定義表格單元格 */
padding: 20px;
}

上面的代碼定義了表格容器、表格行和表格單元格。其中，容器的寬度和高度都為100%，達到了充滿頁面的效果。每一行由一個.row元素來定義，單元格由.cell元素來定義，其中添加了20px的內(nèi)邊距增加顯示效果。

單元格1
單元格2
單元格3
單元格4

最后，我們將表格行和單元格放入表格容器中即可完成頁面的布局。看起來理解使用CSS表格布局也并不難嘛。