HTML Table居中详解(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标签进行背景色的设置，根据各种需求进行样式的设置即可。