如何在 CSS 中居中表格？

2025年3月26日 | 阅读 1 分钟

在网站设计中使用表格是一项令人兴奋的任务。默认情况下，表格的对齐方式是靠左的，但通过使用 CSS 中的 margin 属性，我们可以将其对齐到中心。

如果我们设置 margin-left 和 margin-right 的值为 auto，浏览器就会显示居中的表格。我们可以使用简写属性 margin 并将其设置为 auto 来将表格对齐到中心，而不是使用 margin-left 和 margin-right 属性。

text-align: center; 属性不会将表格本身居中，只会居中表格内容，例如表格中的文本。

让我们通过一个示例来理解这一点。

示例

在这个示例中，我们使用 text-align: center; 属性来居中表格内的内容，并使用 margin-left: auto; 和 margin-right: auto; 来居中表格。

<!DOCTYPE>
<html>  
<head>
<style>  
table, th, td {  
border: 1px solid black;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;  
width: 500px;
text-align: center;
font-size: 20px;
}  
</style>  
</head>
<body>  
<table>  
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>  
<tr>
<td>James</td><td>Gosling</td><td>Maths</td><td>92</td>
</tr>  
<tr>
<td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td>
</tr>  
<tr>
<td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td>
</tr>  
</table>  
</body>
</html>   

输出

下一主题如何在 CSS 中居中文本？

如何在 CSS 中居中表格？

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何在 CSS 中居中表格？

示例

相关帖子

CSS 属性

CSS 中如何将文本设为斜体

CSS 中如何更改图片大小

CSS Ellipsis

CSS ID Selector

CSS 文本抖动效果

CSS 的用途是什么

CSS 中的 Linear Gradient

Define CSS Portal

CSS Color Picker

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器