如何居中对齐 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+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告