如何居中表格

學習如何使用 CSS 將表格居中。

居中的表格：

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

如何使表格居中

第一步 - 添加 HTML：

<table class="center">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

第二步 - 添加 CSS：

要將表格居中，請將左右邊距設置為自動：

.center {
  margin-left: auto;
  margin-right: auto;
}

親自試一試

請注意，如果寬度設置為 100%（全寬），則表格無法居中。

相關頁面

教程：CSS 表格