The HTML DOM TableHeader align property is used to set or return the horizontal alignment of the content inside the table header. It is not supported by HTML 5.
Syntax:
- It returns the align property.
TableHeaderobject.align
- It sets the align property.
TableHeaderObject.align = "left|right|center|justify|char"
Property values:
- left: It sets the text left-aligned.
- right: It sets the text right-aligned.
- center: It sets the text center-aligned.
- justify: It stretches the text of the paragraph to set the width of all lines equal.
- char: It sets the text-align to a specific character.
Return Value : It returns a string value which represents the horizontal alignment of the <th> element.
Example 1: Below code illustrates how to return the TableHeader align 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 align Property
</h2>
<table>
<tr>
<th id="table" style="padding:15px"
align="left">
Username
</th>
</tr>
<tr>
<td>Manas Chhabra</td>
</tr>
</table>
<br>
<button onclick="clickbtn()">
Click Here!
</button>
<p id="paraID"
style="font-size:25px;color:green"></p>
<!-- Script to return the Table Header align Property -->
<script>
function clickbtn() {
var tab = document.getElementById(
"table").align;
document.getElementById("paraID")
.innerHTML = tab;
}
</script>
</center>
</body>
</html>
|
Output:
Example 2: Below code illustrates how to set the TableHeader align 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 align Property
</h2>
<table>
<tr>
<th id="table"
style="padding:15px" align="left">
Username
</th>
</tr>
<tr>
<td>Manas Chhabra</td>
</tr>
</table>
<br>
<button onclick="click1()">
Click Here!
</button>
<p id="paraID" style=
"font-size:25px;color:green">
</p>
</center>
<!-- script to set the Table Header align Property -->
<script>
function click1() {
var tab = document.getElementById(
"table").align = "right";
document.getElementById("sudo")
.innerHTML = tab;
}
</script>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Microsoft Edge
- Opera
- Safari
- Internet Explorer