CSS 表格怎樣居中 在進行網(wǎng)頁設(shè)計時，表格是一個常用的元素。要讓表格在網(wǎng)頁中更具美觀性，往往需要對表格進行居中設(shè)計。下面就來介紹一下如何使用 CSS 對網(wǎng)頁中的表格進行居中操作。 首先，讓我們來看一下一個簡單的表格代碼：

<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小紅</td>
<td>女</td>
<td>20</td>
</tr>
</table>

這個表格是在 HTML 中進行創(chuàng)建的，但是，它并沒有進行樣式設(shè)計，因此，當(dāng)在網(wǎng)頁中展示時，其位置是靠左對齊的。 接下來，我們可以利用 CSS 對表格進行樣式修改，從而使其居中。 首先，在 CSS 中使用 `text-align` 屬性來設(shè)置表格的文本對齊方式：

table {
text-align: center;
}

這段代碼告訴瀏覽器，對于該頁面所有的表格，都采用居中對齊的方式進行排版。 然而，該樣式并不能完全將表格居中，因為表格的寬度是根據(jù)其內(nèi)部元素的寬度計算出來的。因此，我們還需要設(shè)置表格的寬度。

table {
text-align: center;
width: 80%;
margin: auto;
}

在上面的代碼中，我們設(shè)置了表格的寬度為頁面寬度的 80%。并且，我們使用 `margin: auto` 來使表格在水平方向上居中。 如果以上代碼還沒有將表格居中，那么還可以嘗試在表格的直接父級元素中設(shè)置 `text-align: center` 屬性。這樣可以保證表格在其父級元素中居中。 最后，我們可以用以下代碼來設(shè)置表格的邊框和背景顏色，使其更加美觀。

table {
text-align: center;
width: 80%;
margin: auto;
border-collapse: collapse;
background-color: #f1f1c1;
}
th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: center;
background-color: #fff;
}

上述代碼中，我們使用了 `border-collapse: collapse` 屬性將表格邊框合并，使其更加美觀。同時，我們還為表格中的 `th` 和 `td` 元素設(shè)置了以下樣式：內(nèi)邊距為 8 像素，邊框為 1 像素的實線，背景顏色為白色。 通過以上操作，我們可以輕松地設(shè)置網(wǎng)頁中的表格居中屬性，并為其添加更多的美觀元素。