如何使用 CSS 将表格居中?

如何使用 CSS 将表格居中?

cssweb developmentfront end technology

标签用于在 HTML 中创建称为表格的传统组件。在设计网页时，了解如何提升设计的整体视觉效果至关重要。将表格居中对齐是其中的一个重要方面。本教程将教我们如何使用 CSS 将表格居中对齐。

使用 margin-left 和 margin-right 属性

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

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

示例

Name	id	Salary
Suranjan	12475142	32000

说明

该代码是一个 HTML 文件，用于创建一个包含三列的表格:姓名、ID 和薪水。该表格的类名为"table-container"，宽度为视口宽度的 70%，并位于页面中央。表格标题单元格(姓名、ID 和薪水)和表格单元格均带有 2px 实线边框，颜色为 rgb(96, 100, 218)。

该表格包含一行数据，包含姓名"Suranjan"，ID 为 12475142，薪水为 32000。

使用 grid 属性

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

示例

Name	country	Occupation
Tom Holland	USA	Software Developer

说明

这是一段基本的 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 等，我们可以使用这些属性使表格居中。程序员通常认为这种方法是使表格居中最便捷的方法。

示例

Name	class	Subject
Suranjan	12	Mathematics

说明

该代码是一个 HTML 文件，用于创建一个包含三列的表格:姓名、ID 和薪资。该表格的类名为"table-container"，宽度为视口宽度的 70%。表格标题单元格(姓名、ID 和薪资)以及表格单元格均带有 2px 实线边框，颜色为 rgb(96, 100, 218)。该表格包含一行数据，包含姓名"Suranjan"、ID 为 12475142 和薪资 32000。

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

总结

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

相关文章

使用纯 CSS 设计垂直和水平菜单

使用 CSS Animation 为 transform 属性添加动画

CSS word-spacing 属性动画

CSS width 属性动画

CSS outline-color 动画

CSS text-decoration-color 属性动画

在 CSS perspective-origin 属性上执行动画

CSS text-shadow 属性动画

CSS text-indent 属性动画

CSS top 属性动画

打印

下一节 ❯❮ 上一节