HTML DOM tdth vAlign 属性

一池春水

td/th vAlign 属性


定义和用法

vAlign 属性设置或返回单元格内数据的垂直排列方式。

语法

设置 vAlign 属性:


tdObject.vAlign="baseline|bottom|middle|top"

或者

thObject.vAlign="baseline|bottom|middle|top"

返回 vAlign 属性:


tdObject.vAlign

或者

thObject.vAlign

描述
baseline 与基线对齐。
bottom 对内容进行下对齐。
middle 对内容居中对齐。
top 对内容进行上对齐。


浏览器支持

HTML DOM tdth vAlign 属性HTML DOM tdth vAlign 属性HTML DOM tdth vAlign 属性HTML DOM tdth vAlign 属性HTML DOM tdth vAlign 属性

所有主流浏览器都支持 vAlign 属性


实例

下面的例子更改了单元格内数据的垂直排列方式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayResult(){
    document.getElementById('td1').vAlign="top";
    document.getElementById('td2').vAlign="top";
    document.getElementById('td3').vAlign="top";
}
</script>
</head>
<body>

<table width="50%" border="1">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Text</th>
    </tr>
    <tr>
        <td id="td1">Peter</td>
        <td id="td2">Griffin</td>
        <td id="td3">你好,我的名字叫Peter,我需要一个长文本来演示,我需要一个长文本来演示。</td>
    </tr>
</table>
<br>
<button type="button" onclick="displayResult()">内容向上对齐</button>

</body>
</html>


版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码