迹忆客 专注技术分享

本文将介绍在 HTML 中使表格居中的方法。

将 margin 属性设置为 auto 以在 HTML 中将表格居中

使 HTML 表格居中最直接的方法是使用 margin 属性并将其设置为 auto。 此方法适用于将所有块元素居中。

使用边距的自动值将平均占用可用的水平空间。 因此，表格具有一定的宽度，其左右边距被同等调整。

我们还可以将 margin 属性设置为 0px auto。 在这里，0px 值用于上边距和下边距，auto 值用于左边距和右边距。

margin 属性设置相邻元素之间的空间。 该属性结合了四个属性 margin-top、margin-right、margin-bottom 和 margin-left。

margin 属性中的单个值类似于这四个属性的值。

例如，创建一个包含一些行和列的 HTML 表格。 将表格标签的样式属性设置为 margin:auto。

要更具体地编写 CSS，您还可以将属性 margin-left 和 margin-right 写入 auto。

在这里，我们使用内联 CSS 实现了 HTML 中表格的居中。

示例代码：

<table border=1 style="margin:auto">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>

将 margin 属性设置为百分比值以在 HTML 中将表格居中

我们还可以使用 margin 属性中的百分比值将 HTML 中的表格居中。 这种方法背后的概念是将屏幕的水平视口分为三个部分。

它们是左边距、右边距和表格的宽度。 我们可以按百分比设置表格的特定宽度。

接下来，我们可以平分视口的剩余长度，分别设置左右边距。

例如，在 table 标签的 style 属性中设置如下属性。 将 width 属性设置为 50%，将 margin-left 和 margin-right 属性设置为 25%。

结果，表格将占用屏幕水平视口宽度的一半。 剩余空间均等调整到左右边距。

因此，我们可以在 HTML 中将表格居中。

示例代码：

<table border=1 style="width:50%;
margin-left: 25%; margin-right: 25 %;">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>