CSS中的網格和表格是兩種常見的布局方法，它們都可以幫助我們將頁面分割成多個區域，并對這些區域進行定位和樣式的調整。

網格布局是通過將頁面分割成多個網格來顯示元素。我們可以使用CSS的：grid屬性來定義網格布局，如下所示：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
.item {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

在上述代碼中，我們首先將包含元素的容器設置為網格布局，并定義了網格的列和行的數量和大小。接著，我們使用：item選擇器來指定某個元素在網格中的位置，通過grid-column和grid-row屬性來確定元素所處網格的位置。

表格布局則是通過table元素來實現，我們使用table、thead、tbody和tr等標簽來定義表格結構，使用th和td標簽來設置表格單元格中的內容，使用CSS來調整表格的樣式和布局，如下所示：

table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
text-align: left;
background-color: #f2f2f2;
}

在上述代碼中，我們為表格元素設置了CSS樣式來控制邊框、單元格間距等，同時還設置了表頭的樣式，使其和表格內容區分開來。我們可以在CSS中使用選擇器來針對特定的表格或表格單元格進行樣式設置。

綜上所述，網格和表格是CSS中常用的布局方式，通過這些布局方法，我們可以更加靈活地設計頁面，達到更好的視覺效果和用戶體驗。