HTML DOM TBody vAlign Property
The HTML DOM TBody vAlign property is used to set or return the value of the valign attribute of the <tbody> element. The valign attribute is used to specify the vertical alignment of the text-content inside the table body element.
Note: This property is no longer supported in HTML5.
Syntax:
It returns the TBody vAlign property.
TBodyobject.vAlign;
It sets the TBody vAlign property.
TBodyobject.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 which represents the vertical alignment of the <tbody> element.
Example 1: Below HTML code illustrates how to return the TBody vAlign property.
HTML
<!DOCTYPE html><html> <head> <style> table, th, td { border: 1px solid green; } </style></head> <body> <center> <h1> GeeksforGeeks </h1> <h2>HTML DOM TBody vAlign property </h2> <!-- tbody tag starts --> <table> <tbody id="tbodyID" valign="top"> <tr> <td>Shashank</td> <td>@shashankla</td> </tr> <tr> <td>GeeksforGeeks</td> <td>@geeks</td> </tr> </tbody> <!-- tbody tag ends --> </table> <p> Click button to return the vertical alignment of the TBody element </p> <button onclick = "btnclick()"> Click Here! </button> <p id ="paraID"></p> <script> function btnclick() { var tbody = document.getElementById("tbodyID").vAlign; document.getElementById("paraID").innerHTML = tbody; } </script></body></html> |
Output:
Example 2: Below code illustrates how to set the TBody vAlign property.
HTML
<!DOCTYPE html><html> <head> <style> table, th, td { border: 1px solid green; } </style></head> <body> <center> <h1> GeeksforGeeks </h1> <p><b>HTML DOM TBody vAlign property </b></p> <!-- tbody tag starts--> <table> <tbody id="tbodyID" valign="top"> <tr> <td>Shashank</td> <td>@shashankla</td> </tr> <tr> <td>GeeksforGeeks</td> <td>@geeks</td> </tr> </tbody> <!-- tbody tag ends --> </table> <p> Click on the button to set the vertical alignment of the TBody element </p> <button onclick="btnclick()"> Click Here! </button> <p id="paraID"></p> </center> <script> function btnclick() { var tbody = document.getElementById( "tbodyID").vAlign = "bottom"; document.getElementById("paraID") .innerHTML = "The value of the " + "Attribute was changed to: " + tbody; } </script></body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
Please Login to comment...