html怎麼使表格居中

在 HTML 中，表格是非常常見的元素之一，尤其是在展示資料、排版佈局的場景中。如果不加任何樣式的話，表格將會預設以左對齊的方式進行排版，這時需要透過樣式來使表格居中。

以下是三種方法，幫助你實現讓表格在頁面上水平垂直居中：

方法一：使用CSS 居中表格

這是最常見也是最推薦的一種方法，使用CSS 的text-align 屬性讓表格內容居中顯示。

程式碼如下：

<style>
  table {
    margin: 0 auto;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

透過 CSS 的 text-align 屬性設定表格文字內容居中。其中, margin: 0 auto 將表格設定為水平居中。

方法二：使用HTML 屬性

如果你不想用CSS，那麼也可以在HTML 中使用屬性來實作表格水平居中：

程式碼如下：

<table align="center">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

透過在table 標籤中新增align="center" 屬性來實現表格居中。

方法三：使用彈性盒子

CSS 中的 flexbox 是一種非常有用的排版方式，它可以方便地實現水平和垂直方向的居中。

程式碼如下：

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .wrapper table{
    width: 200px;
  }
</style>

<div class="wrapper">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>17</td>
      <td>上海</td>
    </tr>
  </table>
</div>

透過在div 元素中設定display: flex;、justify-content: center; 和align-items: center; 來將表格居中，其中，height: 100vh ; 讓容器元素佔據整個視窗高度。

以上就是三種實作表格水平居中的方法。不過要注意的是，在 HTML 中使用屬性來設定樣式不如使用 CSS 更易於維護和管理。在實際開發中，建議盡可能使用 CSS 來控製表格的樣式，以達到更好的可讀性和可維護性。

以上是html怎麼使表格居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！