参考资料

1. HTML DOM 返回一个锚的名字 实例
2. HTML DOM 元素
3. HTML DOM 设置image的hspace和vspace属性
4. HTML DOM 返回文档的最后一次修改时间 实例
5. HTML DOM 方法
6. HTML DOM 返回当前的文件和链接的文档之间的关系
7. HTML DOM 返回一个表单acceptCharset属性的值
8. HTML DOM获得有下拉列表的表单的ID

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

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。