如何使用 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 文件，用于创建一个包含三列的表格:姓名、ID 和薪水。该表格的类名为"table-container"，宽度为视口宽度的 70%，并位于页面中央。表格标题单元格(姓名、ID 和薪水)和表格单元格均带有 2px 实线边框，颜色为 rgb(96, 100, 218)。
该表格包含一行数据，包含姓名"Suranjan"，ID 为 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 代码 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 等，我们可以使用这些属性使表格居中。程序员通常认为这种方法是使表格居中最便捷的方法。
示例
<!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 文件，用于创建一个包含三列的表格:姓名、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 的更多信息:https://www.cainiaomax.com/css/
