HTML DOM Table Header vAlign Property
The HTML DOM TableHeader vAlign property is used to set or return the value of the vAlign attribute of the <th> element. The vAlign attribute is used to specify the vertical alignment of the text-content inside the Table Header.
Note: This property is no longer supported in HTML5.
Syntax:
- It returns the Table Header vAlign Property.
TableHeaderobject.vAlign;
- It sets the Table Header vAlign Property.
TableHeaderobject.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 Value: It returns a string value that represents the vertical alignment of the Table Header.
We will utilize the above property values & will understand its implementation through the example.
Example 1: Below code illustrates how to return the vAlign property.
HTML
<!DOCTYPE html><html><head> <!-- Style to set border --> <style> table, th, td { border: 1px solid black; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> DOM TableHeader vAlign Property </h2> <table> <tr> <th id="table" style="padding:15px" valign="baseline"> Username </th> </tr> <tr> <td>Manas Chhabra</td> </tr> </table> <br> <button onclick="myGeeks()"> Click Here!</button> <p id="sudo" style="font-size:25px; color:green"></p> <!-- Script to return Table Header vAlign Property --> <script> function myGeeks() { var tab = document.getElementById("table").vAlign; document.getElementById("sudo").innerHTML = tab; } </script></body></html> |
Output:
Example 2: Below HTML code illustrates how to set the vAlign property.
HTML
<!DOCTYPE html><html><head> <!-- Style to set border --> <style> table, th, td { border: 1px solid black; } </style></head><body> <center> <h1>GeeksforGeeks</h1> <h2> DOM TableHeader vAlign Property </h2> <table> <tr> <th id="table" style="padding:50px" valign="baseline"> Username </th> </tr> <tr> <td>Manas Chhabra</td> </tr> </table> <br> <button onclick="myGeeks()"> Click Here! </button> <p id="sudo" style="font-size:25px; color:green"> </p> </center> <!-- Script to set the Table Header vAlign Property --> <script> function myGeeks() { var tab = document.getElementById( "table").vAlign = "bottom"; document.getElementById("sudo").innerHTML = tab; } </script></body></html> |
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Microsoft Edge
- Opera
- Safari
- Internet Explorer
Please Login to comment...