📌  相关文章
📜  HTML DOM THead vAlign 属性(1)

📅  最后修改于: 2023-12-03 15:31:10.594000             🧑  作者: Mango

HTML DOM THead vAlign Property

HTML DOM中的THead元素代表表格头，vAlign属性可以用来设置表格头的垂直对齐方式。

语法

以下是设置THead的vAlign属性的语法：

document.getElementById("myTable").tHead.vAlign = "top|middle|bottom";
属性值

vAlign属性可以接受以下三种属性值：

  • top：表格头和表格内容底部对齐；
  • middle：表格头和表格内容垂直居中对齐；
  • bottom：表格头和表格内容顶部对齐。
示例

以下是设置THead的vAlign属性的示例：

<!DOCTYPE html>
<html>
<body>

<table border="1" id="myTable">
  <thead style="background-color:lightgrey;">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<script>
document.getElementById("myTable").tHead.vAlign = "bottom";
</script>

</body>
</html>

输出结果：

| Month | Savings | | ------- | ------- | | January | $100 | | February| $80 |

在上面的示例中，表格头和表格内容底部对齐。当vAlign属性设置为middle时，表格头和表格内容垂直居中对齐；当vAlign属性设置为top时，表格头和表格内容顶部对齐。

注意事项
  • vAlign属性只适用于THead元素；其他元素无法使用；
  • 在HTML中，最好使用CSS来控制表格内容的对齐方式。