如何在HTML中对齐表格

HTML表格是一种将数据组织成行和列的结构。但是，如果表格没有对齐，它们可能会很难看并且难以阅读。在这篇文章中，我们将了解如何在HTML中对齐表格，使其更易于阅读。

水平对齐

你可以在<th>和<td>标签中使用align属性来水平对齐单元格内容。align属性可以设置为以下几个值：

• left：将单元格内容左对齐。
• right：将单元格内容右对齐。
• center：将单元格内容居中对齐。
• justify：使单元格内容两端对齐。

<table>
  <tr>
    <th align="left">姓名</th>
    <th align="center">年龄</th>
    <th align="right">性别</th>
  </tr>
  <tr>
    <td align="left">小明</td>
    <td align="center">18</td>
    <td align="right">男</td>
  </tr>
  <tr>
    <td align="left">小红</td>
    <td align="center">20</td>
    <td align="right">女</td>
  </tr>
</table>

垂直对齐

在默认情况下，单元格内容垂直居中对齐。你可以使用valign属性来改变它。valign属性可以设置为以下几个值：

• top：将单元格内容顶端对齐。
• middle：将单元格内容居中对齐。
• bottom：将单元格内容底端对齐。

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td valign="top">小明</td>
    <td valign="middle">18</td>
    <td valign="bottom">男</td>
  </tr>
  <tr>
    <td valign="top">小红</td>
    <td valign="middle">20</td>
    <td valign="bottom">女</td>
  </tr>
</table>

CSS样式

你可以在CSS中使用text-align和vertical-align属性来对齐表格单元格。这种方法可能比使用align和valign属性更灵活和强大。

<style>
  th {
    text-align: center;
    vertical-align: middle;
  }
  td {
    text-align: left;
    vertical-align: top;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>20</td>
    <td>女</td>
  </tr>
</table>

以上便是如何在HTML中对齐表格的方法，你可以根据实际情况选择使用哪种方法。