CSS 如何居中表格

<table>标签用于在HTML中创建传统的表格组件。为了设计网页，了解如何改进整体设计的可视化效果非常重要。其中一个重要的方面是将表格居中对齐。本教程将教会我们如何使用CSS居中表格。

使用margin-left和margin-right属性

这是一种常用的方法，在HTML和CSS中居中对齐表格元素。CSS的margin-left和margin-right属性用于分别设置元素的左右边距。边距在元素的边框外创建空间，有效地将元素推离页面上的其他元素。

这些属性的值可以使用长度值（如px、em、cm）、百分比或预定义的值auto、inherit或initial进行设置。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
            margin-left: auto;
            margin-right: auto;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>id</th>
         <th>Salary</th>
         <tr>
            <td>Suranjan</td>
            <td>12475142</td>
            <td>32000</td>
         </tr>
      </table>
   </body>
</html>

解释

这段代码是一个HTML文件，创建了一个有三列的表格：Name（姓名）、id（身份证号）和Salary（薪水）。该表格使用了一个class为”table-container”的样式，并且宽度占浏览器视口宽度的70％，在页面上居中显示。表格的表头单元格（Name、id和Salary）和表格单元格都有2px的实线边框，颜色为rgb(96, 100, 218)。
表格有一行数据，包含姓名为”Suranjan”、身份证号为12475142和薪水为32000。

使用grid属性

另一种常用的方法是使用grid属性来居中对齐表格。网格是HTML和CSS的二维元素，我们可以使用它来创建行和列。如果我们首先将表格声明为网格元素，然后可以使用网格的place-items属性来将表格居中对齐。place-items属性实际上是水平和垂直居中对齐网格。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
         }
         body{
            display: grid;
            place-items: center;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>country</th>
         <th>Occupation</th>
         <tr>
            <td>Tom Holland</td>
            <td>USA</td>
            <td>Software Developer</td>
         </tr>
      </table>
   </body>
</html>

解释

这是一个基本的HTML代码，创建了一个包含三列的表格-姓名、国家和职业。表格有一行的数据，包含姓名（Tom Holland）、国家（美国）和职业（软件开发人员）的值。
在HTML的头部部分中定义的CSS样式将表格、表格单元格（th、td）和表格本身（class=”table-container”）的边框设置为2px实心，颜色为RGB（96, 100, 218）。表格的宽度设置为70vw（视口宽度的70%）。body部分设置为显示为网格并将页面上的项目居中。

使用弹性盒子属性

另一种非常流行的方法是使用CSS的弹性盒属性来居中对齐表格。弹性盒是HTML和CSS的响应式元素。弹性盒有一些属性，如align-items、justify-content等，我们可以使用这些属性来居中对齐表格。程序员通常认为这是最方便的居中对齐表格的方法。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
         }
         body{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>class</th>
         <th>Subject</th>
         <tr>
            <td>Suranjan</td>
            <td>12</td>
            <td>Mathematics</td>
         </tr>
      </table>
   </body>
</html>

解释

该代码是一个HTML文件，创建了一个包含三列的表格：Name，id和Salary。该表格的类名为“table-container”，宽度为视口宽度的70%。表头单元格（Name，id和Salary）和表格单元格都具有2px宽的实线边框，颜色为rgb(96, 100, 218)。表格有一行数据，包含名称“Suranjan”，id为12475142，薪水为32000。
HTML文档的部分具有CSS样式display: flex，使成为一个Flex容器。CSS样式flex-direction: row将Flex容器中的项目方向设置为行。CSS样式align-items和justify-content分别垂直和水平居中项目。