数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何居中对齐 HTML 表格的内容？
在 HTML 中，<table> 标签以表格的形式显示内容。默认情况下，HTML 表格内内容的对齐方式是靠左。在本教程中，我们将了解如何居中对齐 HTML 表格的内容。
使用 <center> 标签
顾名思义，<center> 标签有助于对齐任何容器内的文本。要居中对齐文本，我们需要将文本包含在 <center> 和 <center/> 标签之间。
但是，这并不是推荐的做法。我们应该只在必须使用 HTML 标签进行设计时才使用此方法。与该标签相关的缺点是，您必须手动将每个文本都包含在标签中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table,td,th{
border:1px solid;
padding:3vw;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th><center>Name</center></th>
<th><center>Id</center></th>
<th><center>Designation</center></th>
</tr>
<tr>
<td><center>Tom Holland</center></td>
<td><center>12124325</center></td>
<td><center>Software Engineer</center></td>
</tr>
<tr>
<td><center>Pascal</center></td>
<td><center>12124329</center></td>
<td><center>Designer</center></td>
</tr>
</table>
</center>
</body>
</html>
在 td 标签中使用 align 属性
我们可以在 td 标签中使用 align 属性来获得类似的结果。但是，此方法同样不推荐，因为我们必须在每个标签中手动使用此代码。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td,th{
border:1px solid;
padding:3vw;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th align="center">Name</th>
<th align="center">Qualification</th>
<th align="center">Designation</th>
</tr>
<tr>
<td align="center">Hellen Smith</td>
<td align="center">MBA</td>
<td align="center">Marketing officer</td>
</tr>
<tr>
<td align="center">John Summerfield</td>
<td align="center">CSE</td>
<td align="center">Software Engineer</td>
</tr>
</table>
</center>
</body>
</html>
使用 CSS text-align 属性
在表格中居中对齐文本的更好方法是使用 CSS 的 text-align 属性。您可以将此属性用于 <table>、<tr> 或 <td> 标签。这些标签分别代表表格、表格行和表格数据。
尽管 CSS 不会在您使用多个 text-align 属性时报错，但使用以下任意一个属性就能满足我们的需求。
tr{ text-align: center; }
td{ text-align: center; }
table{ text-align: center; }
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td,th{
border:1px solid;
padding:3vw;
}
table{
text-align: center;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th>Name</th>
<th>city</th>
<th>Country</th>
</tr>
<tr>
<td>Steve Smith</td>
<td>Sydny</td>
<td>Australia</td>
</tr>
<tr>
<td>Virat Kohli</td>
<td>Mumbai</td>
<td>India</td>
</tr>
</table>
</center>
</body>
</html>
结论
在本文中，我们了解了如何在表格中居中对齐文本。使用 <center> 标签是一种传统方法。它是在互联网依赖 Web 1.0 时代使用的。如今，我们使用 text-align 等 CSS 属性来居中对齐文本。
更新于: 2023年3月13日
2K+ 阅读量
广告