The HTML DOM TableData align property is used to set or return the horizontal alignment of the content within the table cell. It is not supported by HTML5.
Syntax:
- It returns the align property.
TableDataobject.align
- It sets the align property.
TableDataObject.align = "left | right | center | justify | char"
Property Values:
- left: It sets the left-align to the TableData cell.
- center: It sets the center-align to the TableData cell. It is the default value.
- right: It sets the right-align to the TableData cell.
- 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 Values: It returns a string value that represents the alignment of the TableData element.
Example 1: Below HTML code returns the TableData align 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 align 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">25</td>
<td align="right">EC</td>
</tr>
</table>
<br>
<button onclick="myFunction()">
Return
</button>
<p id="paraID"></p>
<script>
function myFunction() {
// return Table Data align property
var x =
document.getElementById("columnID").align;
document.getElementById("paraID").innerHTML = x
}
</script>
</center>
</body>
</html>
|
Output:
Example 2: Below code sets the TableData to align 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 align 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">25</td>
<td align="right">EC</td>
</tr>
</table>
<br>
<button onclick="btnclick()">
Set
</button>
<p id="paraID"></p>
<script>
function btnclick() {
// set Table Data align property
var x =
document.getElementById("columnID").align = "right";
document.getElementById("paraID").innerHTML = x
}
</script>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by HTML DOM TableData align attributes are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera