td/th vAlign 属性

在 HTML 表格中，我们经常会使用 <td> 和 <th> 元素来表示表格的单元格。这些元素中有一个很有用的属性叫做 vAlign，用来控制单元格中内容的垂直对齐方式。

什么是 vAlign 属性

vAlign 属性是用来指定表格单元格中内容的垂直对齐方式的。它可以接受以下几个值：

• top：将内容对齐到单元格的顶部
• middle：将内容垂直居中对齐
• bottom：将内容对齐到单元格的底部
• baseline：将内容与单元格的基线对齐

如何使用 vAlign 属性

要使用 vAlign 属性，只需要在 <td> 或 <th> 元素中添加 vAlign 属性并指定对齐方式即可。例如：

// www.javascriptcn.com code example
<table>
  <tr>
    <th vAlign="top">姓名</th>
    <th vAlign="middle">年龄</th>
    <th vAlign="bottom">性别</th>
  </tr>
  <tr>
    <td vAlign="top">张三</td>
    <td vAlign="middle">25</td>
    <td vAlign="bottom">男</td>
  </tr>
</table>

在上面的示例中，我们分别对表头和表格内容的单元格指定了不同的垂直对齐方式，可以看到内容在单元格内的垂直位置有所不同。

注意事项

• vAlign 属性只对 <td> 和 <th> 元素有效，对其他元素没有作用。
• 不同浏览器对 vAlign 属性的支持可能有所差异，建议在使用时进行兼容性测试。

通过使用 vAlign 属性，我们可以轻松地控制表格中内容的垂直对齐方式，使表格更加美观和易读。希望本文对您有所帮助！