X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

td/th vAlign Property

td/th Object Reference td/th Object

Definition and Usage

The vAlign property sets or returns the vertical alignment of the content within a cell.

Syntax

Set the vAlign property:

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

or

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

Return the vAlign property:

tdObject.vAlign

or

thObject.vAlign

Value Description
baseline Content is aligned to the baseline. The baseline is the "imaginary line" which most letters "sit" on, in a line of text. The baseline value sets the row so that all the table data share the same baseline. Often this has the same effect as the bottom value. However, if the fonts are in different sizes, baseline looks better.
bottom Content is aligned to the bottom
middle Content is aligned to the middle. This is default
top Content is aligned to the top


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The vAlign property is supported in all major browsers.


Example

Example

Change the vertical alignment of the content within the table cells:

<html>
<head>
<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 Griffin.
    I need a long text for this example.
    I need a long text for this example.</td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Top-align content</button>

</body>
</html>

Try it yourself »


td/th Object Reference td/th Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook