td/th vAlignProperty
td/th Object
Definition and Usage
The vAlign property sets or returns the vertical alignment of data within a cell.
Syntax
Set the vAlign property:
tdObject.vAlign="baseline|bottom|middle|top"
or
thObject.vAlign="baseline|bottom|middle|top"
or
thObject.vAlign="baseline|bottom|middle|top"
Return the vAlign property:
tdObject.vAlign
or
thObject.vAlign
or
thObject.vAlign
| Value | Description |
|---|---|
| baseline | Align to baseline. |
| bottom | Align the content to the bottom. |
| middle | Align the content to the center. |
| top | Align the content to the top. |
Browser Support
All major browsers support the vAlign property.
Example
Example
The following example changes the vertical alignment of data within a cell:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.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">Hello, my name is Peter. I need a long text to demonstrate, I need a long text to demonstrate.</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Align content to the top</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.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">Hello, my name is Peter. I need a long text to demonstrate, I need a long text to demonstrate.</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Align content to the top</button>
</body>
</html>
Try it Yourself »
td/th Object Other Extensions