html怎么使表格居中-前端问答-PHP中文网

html怎么使表格居中

王林

发布： 2023-05-21 11:48:37

原创

17366 人浏览过

在 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中文网其他相关文章！