HTML DOM单元格内容水平对齐

HTML DOM 单元格内容水平对齐

介绍

HTML表格单元格内容可以通过多种方式进行水平对齐，主要使用align属性或CSS样式来控制。

主要标签和属性

• <td align="value"> - 表格数据单元格

• <th align="value"> - 表格标题单元格

• style="text-align: value" - CSS样式方式

对齐值

• left: 左对齐

• right: 右对齐

• center: 居中对齐

• justify: 两端对齐

用法示例

HTML属性方式

<table>
  <tr>
    <td align="left">左对齐</td>
    <td align="center">居中对齐</td>
    <td align="right">右对齐</td>
  </tr>
</table>

CSS样式方式

<table>
  <tr>
    <td style="text-align: left">左对齐</td>
    <td style="text-align: center">居中对齐</td>
    <td style="text-align: right">右对齐</td>
  </tr>
</table>

功能扩展

使用CSS类

<style>
  .left { text-align: left; }
  .center { text-align: center; }
  .right { text-align: right; }
</style>

<table>
  <tr>
    <td class="left">左对齐</td>
    <td class="center">居中对齐</td>
    <td class="right">右对齐</td>
  </tr>
</table>

整列对齐

<style>
  td:nth-child(1) { text-align: left; }
  td:nth-child(2) { text-align: center; }
  td:nth-child(3) { text-align: right; }
</style>

<table>
  <tr>
    <td>左对齐</td>
    <td>居中对齐</td>
    <td>右对齐</td>
  </tr>
</table>

注意事项

• align属性在HTML5中已不推荐使用，建议使用CSS的text-align属性

• 对齐效果会继承到单元格内的所有内容，包括文本和其他内联元素