Easy Tutorial
❮ Prop Style Columnspan Met Table Deletetfoot ❯

td/thvAlign Attribute


Definition and Usage

The vAlign attribute sets or returns the vertical alignment of the data within a cell.

Syntax

Setting the vAlign attribute:

Returning the vAlign attribute:

Value Description
baseline Aligns with the baseline.
bottom Aligns content to the bottom.
middle Centers content vertically.
top Aligns content to the top.

Browser Support

All major browsers support the vAlign attribute.


Example

The following example changes the vertical alignment of the data within cells:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</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()">Align Content to Top</button>

</body>
</html>

❮ Prop Style Columnspan Met Table Deletetfoot ❯