首页  >  文章  >  web前端  >  如何用 CSS 使表格居中?

如何用 CSS 使表格居中?

王林
王林转载
2023-09-13 08:21:022016浏览

如何用 CSS 使表格居中?

f5d188ed2c074f8b944552db028f98a1标签用于在HTML中创建传统的组件称为表格。在设计网页时,了解如何改善设计的整体可视化是必不可少的。将表格居中对齐是其中一个重要方面。本教程将教我们如何使用CSS将表格居中。

使用margin-left和margin-right属性

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

属性的值可以使用长度值(例如,px、em、cm)、百分比或预定义的值auto、inherit或initial进行设置。

Example

的中文翻译为:

示例

<!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。该表格的“表格容器”类宽度为视口宽度的 70%,并且位于页面中央。表头单元格(姓名、id 和薪水)和表格单元格具有 2 像素实线边框,颜色为 rgb(96, 100, 218)。

  • 该表有一行数据,其中包含姓名“Suranjan”,id 为 12475142,工资为 32000。

使用grid属性

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

Example

的中文翻译为:

示例

<!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 的 head 部分中定义的 CSS 样式将表格的边框、表格单元格(th、td)和表格本身(class="table-container")设置为 2px 实线RGB 颜色 (96, 100, 218)。表格的宽度设置为 70vw(视口宽度的 70%)。正文部分设置为显示为网格并将项目置于页面的中心。

使用 Flexbox 属性

另一种非常流行的方法是使用CSS的flexbox属性来居中对齐表格。 Flexbox 是 HTML 和 CSS 的响应式元素。 Flexbox具有某些属性,例如alien-items、justify-content等,我们可以使用它们来使表格居中。程序员通常发现此方法是使表格居中的最方便的方法。

Example

的中文翻译为:

示例

<!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",编号为12475142,薪水为32000。

  • HTML文档的主体具有CSS样式display: flex,使得主体成为一个弹性容器。CSS样式flex-direction: row将弹性容器的项目方向设置为行。CSS样式align-items和justify-content分别在垂直和水平方向上居中项目。

结论

在本文中,我们了解了如何借助 CSS 将表格居中。在本教程中,我们看到了边距属性、网格、Flexbox 等的用法。在讨论的所有方法中,应该使用 Flexbox。这是因为弹性框更方便并且能够响应 UI 元素。

以上是如何用 CSS 使表格居中?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文转载于:tutorialspoint.com。如有侵权,请联系admin@php.cn删除