参考资料

1. HTML DOM 导航节点关系
2. HTML DOM 被按下的键盘键的keycode？
3. HTML DOM 根节点
4. HTML DOM改变单元格横跨的列数(colspan属性)
5. HTML DOM 返回图像映射某个区域的坐标实例
6. HTML DOM 返回一个表单的name 实例
7. HTML DOM 哪个元素被按下了？
8. HTML DOM 返回一个表单acceptCharset属性的值

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属性

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