如何使用CSS设置表格的标题行文字居中？

翻滚的胖子
2023-08-01 10:54:50
前端技术
CSS JavaScript

在HTML中，我们经常使用表格来展示数据。表格的标题行通常用于标识每一列的含义。如果标题行的文字无法居中对齐，会影响表格的美观度和可读性。

要实现表格标题行文字居中，我们可以使用CSS的text-align属性。

table th {
  text-align: center;
}

在上面的代码中，我们选择所有的表格标题行元素（th），然后通过设置text-align属性为center，将文字居中对齐。

下面是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    table th {
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </table>
</body>
</html>

在上面的代码中，我们将text-align: center;样式应用于表格标题行元素（th），实现标题行文字的居中对齐。

通过上述方法，你可以轻松地使用CSS来设置表格的标题行文字居中。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com