tr vAlignProperty
tr Object
Definition and Usage
The vAlign property sets or returns the vertical alignment of data within a row.
Syntax
Set the vAlign property:
trObject.vAlign="baseline|bottom|middle|top"
Return the vAlign property:
trObject.vAlign
| Value | Description |
|---|---|
| baseline | Align to baseline. |
| bottom | Align content to the bottom. |
| middle | Align content to the bottom. |
| top | Align 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 table cells:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById('tr2').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>First Name</th>
<th>Next Name</th>
<th>Text</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>Hello, my name is Perter. I need a long text for demonstration. I need a long text for demonstration.</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Align content upward</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById('tr2').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>First Name</th>
<th>Next Name</th>
<th>Text</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>Hello, my name is Perter. I need a long text for demonstration. I need a long text for demonstration.</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Align content upward</button>
</body>
</html>
Try it Yourself »
tr Object Other Extensions