HTML 表格单元格居中对齐

在本文中，我们将介绍如何使用HTML表格单元格居中对齐的方法。

阅读更多：HTML 教程

什么是表格单元格居中对齐？

在HTML中，表格是一种常用的元素，用于展示数据和信息。在表格中，表格单元格是表格的基本组成单元。表格单元格的居中对齐可以使表格更加美观和易于阅读。

在HTML中，我们可以使用CSS样式来实现表格单元格的居中对齐。其中，text-align属性用于指定文本在表格单元格中的对齐方式。通过将text-align属性设置为center，我们可以实现表格单元格的居中对齐。

如何居中对齐表格单元格？

要居中对齐表格单元格，我们可以使用以下步骤：

创建一个HTML表格。

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

在CSS样式中添加表格样式，以及将表格单元格居中对齐。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    text-align: center;
    border: 1px solid black;
    padding: 10px;
  }
</style>

解释：

table样式设置表格宽度为100%并合并表格边框线。
td样式将表格单元格的文本居中对齐，并设置单元格的边框线和内边距。

将HTML和CSS代码组合到一个HTML文件中，并在浏览器中打开该文件，即可看到居中对齐的表格单元格。

示例

以下是一个完整的示例，展示了如何使用HTML居中对齐表格单元格：

<!DOCTYPE html>
<html>
<head>
  <style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    text-align: center;
    border: 1px solid black;
    padding: 10px;
  }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
  </table>
</body>
</html>