html怎么使表格居中

百变鹏仔 2个月前 (10-31) #前端问答

文章标签表格

在 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 居中表格

方法二：使用 HTML 属性

方法三：使用弹性盒子

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗