HTML DOM TableData vAlign Property
The HTML DOM TableData vAlign property is used to set or return the value of the vAlign attribute of the <td> element. The vAlign attribute is used to specify the vertical alignment of the text content inside the Table Data cell.
Note: This property is no longer supported in HTML5.
Syntax:
- It returns the Table Data vAlign property.
TableDataobject.vAlign;
- It sets the Table Data vAlign Property.
TableDataobject.vAlign = "top|middle|bottom|baseline";
Property Values:
- top: It sets the content to the top-align.
- middle: It sets the content to middle-align.
- bottom: It sets the content to the bottom-align.
- baseline: It sets the context to baseline. The baseline is the line where most of the characters sit.
Return Values: It returns a string value that represents the vertical alignment of the element.
Example 1: Below code returns the Table Data vAlign property.
HTML
<!DOCTYPE html><html><head> <style> table, th, td { border: 1px solid green; } </style></head><body style="text-align:center;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>DOM TableData vAlign property</h2> <table width="500" border="1"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td align="center">BITTU</td> <td align="left">22</td> <td align="right">CSE</td> </tr> <tr> <td align="center">RAKESH</td> <td id="columnID" align="left" valign="top">25</td> <td align="right">EC</td> </tr> </table> <br> <button onclick="btnclick()"> Return </button> <p id="paraID"></p> </center> <script> function btnclick() { // return Table data vAlign Property var x = document.getElementById( "columnID").vAlign; document.getElementById( "paraID").innerHTML = x } </script></body></html> |
Output:
Example 2: Below HTML code demonstrates to set the vAlign property.
HTML
<!DOCTYPE html><html><head> <style> table, th, td { border: 1px solid green; } </style></head><body style="text-align:center;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>DOM TableData vAlign property</h2> <table width="500" border="1"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td align="center">BITTU</td> <td align="left">22</td> <td align="right">CSE</td> </tr> <tr> <td align="center">RAKESH</td> <td id="columnID" align="left" valign="top">25</td> <td align="right">EC</td> </tr> </table> <br> <button onclick="btnclick()"> Return </button> <p id="paraID"></p> </center> <script> function btnclick() { // set Table data vAlign Property var x = document.getElementById( "columnID").vAlign = "bottom"; document.getElementById( "paraID").innerHTML = x } </script></body></html> |
Output:
Supported Browsers: The browser supported by HTML DOM TableData vAlign attributes are listed below.
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Please Login to comment...