数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学如何使用 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%）。body 部分设置为显示为网格，并将项目居中在页面上。
使用 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 文档的 body 部分具有 CSS 样式 display: flex，这使得 body 成为一个 flex 容器。CSS 样式 flex-direction: row 将 flex 容器项目的排列方向设置为一行。CSS 样式 align-items 和 justify-content 分别垂直和水平居中对齐项目。
结论
在本文中，我们了解了如何在 CSS 的帮助下居中表格。在本教程中，我们看到了 margin 属性、grid 和 flexbox 等的使用。在所有讨论的方法中，应该使用 flexbox。这是因为 flexbox 更方便并且对 UI 元素具有响应性。
浏览量：215
