HTML Table居中詳解

一、Table整體居中

如果想讓整個Table居中，需要對Table標籤進行樣式設置。可以通過以下幾種方式實現：

1、使用margin: 0 auto;進行居中：

<table style="margin: 0 auto;">

2、使用text-align:center進行居中：

<table style="text-align:center;">

3、使用table-layout:fixed進行居中：

<table style="table-layout: fixed; margin:auto; width:100%">

其中，table-layout: fixed的作用是讓Table寬度自適應，而不是根據內容寬度設置。

二、Table中內容居中

如果想讓Table中的內容都居中，可以分別對th、td標籤進行樣式設置，也可以對Table進行樣式設置。

1、對Table進行樣式設置：

<table style="text-align:center;">
    <tr>
        <th>標題1</th>
        <th>標題2</th>
    </tr>
    <tr>
        <td>內容1</td>
        <td>內容2</td>
    </tr>
</table>

這樣所有的內容都會居中。

2、對th、td標籤進行樣式設置：

<table>
    <tr>
        <th style="text-align:center;">標題1</th>
        <th style="text-align:center;">標題2</th>
    </tr>
    <tr>
        <td style="text-align:center;">內容1</td>
        <td style="text-align:center;">內容2</td>
    </tr>
</table>

這樣只會讓th、td標籤中的內容居中，而不會對整個Table進行居中。

三、Table寬度自適應，但不超出父級容器寬度

如果想讓Table寬度自適應，但不超出父級容器的寬度，可以使用max-width屬性對Table進行設置。

<div style="width:80%; margin: 0 auto;">
    <table style="max-width:100%;">
        <tr>
            <th style="text-align:center;">標題1</th>
            <th style="text-align:center;">標題2</th>
        </tr>
        <tr>
            <td style="text-align:center;">內容1</td>
            <td style="text-align:center;">內容2</td>
        </tr>
    </table>
</div>

這裡我們使用一個父級div將Table包裹起來，並設置其寬度為80%，讓Table居中。然後Table的max-width屬性設置為100%，讓其自適應，並且不會超出父級容器的寬度。

四、Table中某一行居中

如果想讓某一行或某個單元格居中，可以使用text-align:center進行居中。

<table>
    <tr>
        <td>內容1</td>
        <td style="text-align:center;">內容2</td>
        <td>內容3</td>
    </tr>
</table>

這裡我們只對第二個單元格進行了居中處理。

五、Table垂直居中

如果想要Table垂直居中，可以使用vertical-align: middle對tr、td、th元素進行樣式設置。

<table style="height:200px;">
    <tr style="vertical-align: middle;">
        <td>內容1</td>
        <td>內容2</td>
    </tr>
</table>

這裡我們對tr標籤設置vertical-align:middle即可。

六、Table邊框居中

如果想讓Table的邊框居中，可以使用border-collapse:collapse，同時對各個單元格的border進行設置。

<table style="border-collapse: collapse; border:2px solid black;">
    <tr>
        <td style="border:2px solid black;">內容1</td>
        <td style="border:2px solid black;">內容2</td>
    </tr>
</table>

這裡我們使用border-collapse:collapse對Table進行設置，同時對單元格的border也進行設置。

七、Table響應式布局

如果想讓Table在移動端也可以自適應，可以使用@media查詢來進行響應式布局。

<table>
    <tr>
        <th>標題1</th>
        <th>標題2</th>
        <th>標題3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<style>
    @media screen and (max-width: 480px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }
        th {
            text-align: center;
            height:80px;
        }
        td {
            height: 50px;
            border-bottom:1px solid #ddd;
            text-align:center;
        }
    }
</style>

這裡我們使用@media查詢來對移動端進行響應式布局，將Table中的所有元素都設置為block，並使用text-align:center對th、td元素進行居中處理，同時設置其高度和border進行樣式設置。

八、Table中添加背景色

如果想對Table進行背景色的添加，可以分別對th、td、tr標籤進行樣式設置，並基於各種實際需求設置樣式。

<table>
    <tr style="background-color: #F8F8F8;">
        <th>標題1</th>
        <th>標題2</th>
        <th>標題3</th>
    </tr>
    <tr>
        <td style="background-color: #FFFFFF;">內容1</td>
        <td style="background-color: #FFFFFF;">內容2</td>
        <td style="background-color: #FFFFFF;">內容3</td>
    </tr>
</table>

這裡我們分別對tr、td標籤進行背景色的設置，根據各種需求進行樣式的設置即可。