参考资料

1. HTML DOM 返回图像映射的某个区域的pathname 实例
2. HTML DOM单元格内容垂直对齐
3. HTML DOM 对iframe排版
4. HTML DOM禁用和启用下拉列表
5. HTML DOM 返回一个客户端图像映射的usemap的值
6. HTML DOM 返回一个区域的href属性的querystring部分 实例
7. HTML DOM 返回一个iframe中的marginwidth属性的值
8. HTML DOM 返回image的name

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

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