HTML DOM THead vAlign Property
HTML DOM THead vAlign Property is used to set or return the value of the valign attribute of the <thead> element. The valign attribute is used to specify the vertical alignment of the text content inside the table heading element.
Note: This property is no longer supported in HTML5.
Syntax:
- It returns the THead vAlign property.
THeadobject.vAlign;
- It sets the THead vAlign property.
THeadobject.vAlign = "top | middle | bottom | baseline";
Property Values:
Property Value |
Description |
---|---|
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 <thead> element.
Example 1: This example illustrates how to return the THead vAlign property.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM THead vAlign property </ title > < style > body { text-align: center; } table { margin: auto; } table, th, td { border: 1px solid green; } thead { height: 50px; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML DOM THead vAlign property</ h2 > < table > < thead id = "theadID" valign = "top" > < tr > < td >Username</ td > < td >User_Id</ td > </ tr > </ thead > < tbody > < tr > < td >Shashank</ td > < td >@shashankla</ td > </ tr > < tr > < td >w3wiki</ td > < td >@Beginner</ td > </ tr > </ tbody > </ table > < br > < button onClick = "myBeginner()" > Click Here! </ button > < p id = "result" ></ p > < script > function myBeginner() { let thead_valign = document .getElementById("theadID").vAlign; document.getElementById("result") .innerHTML = "Vertical " + thead_valign + " Aligned"; } </ script > </ body > </ html > |
Output:
Example 2: This example illustrates how to set the THead vAlign Property.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM THead vAlign property </ title > < style > body { text-align: center; } table { margin: auto; } table, th, td { border: 1px solid green; } thead { height: 50px; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML DOM THead vAlign property</ h2 > < table > < thead id = "theadID" valign = "top" > < tr > < td >Username</ td > < td >User_Id</ td > </ tr > </ thead > < tbody > < tr > < td >Shashank</ td > < td >@shashankla</ td > </ tr > < tr > < td >w3wiki</ td > < td >@Beginner</ td > </ tr > </ tbody > </ table > < br > < button onClick = "myBeginner()" > Click Here! </ button > < p id = "result" ></ p > < script > function myBeginner() { let thead_valign = document .getElementById("theadID").vAlign = "bottom"; document.getElementById("result") .innerHTML = thead_valign; } </ script > </ body > </ html > |
Output:
Supported Browsers:
- Chrome 1
- Edge 12
- Opera 1
- Firefox 15
- Safari 3