The TableHeader object represents an HTML <th> element.
We can access a <th> element by using getElementById().
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!-- ww w . ja v a2 s .co m-->
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th id="myTh">Name</th>
</tr>
<tr>
<td>cell</td>
</tr>
</table>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myTh");
x.innerHTML = "New Table Header";
}
</script>
</body>
</html>
The code above is rendered as follows:
We can create a <th> element by using the document.createElement() method.
<!DOCTYPE html>
<html>
<head>
<style>
table, th {<!--from ww w. j a v a 2 s .c om-->
border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tr id="myTr">
</tr>
</table>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
var x = document.createElement("TH");
var t = document.createTextNode("table header cell");
x.appendChild(t);
document.getElementById("myTr").appendChild(x);
}
</script>
</body>
</html>
The code above is rendered as follows:
| Property | Description |
|---|---|
| abbr | Sets or gets the value of the abbr attribute |
| align | Not supported in HTML5.
Use style.textAlign instead. Sets or gets the horizontal alignment in a data cell |
| axis | Not supported in HTML5. Sets or gets a comma-separated list of related data cells |
| background | Not supported in HTML5.
Use style.background instead. Sets or gets the background image of a data cell |
| bgColor | Not supported in HTML5.
Use style.backgroundColor instead. Sets or gets the background color of a table |
| cellIndex | Returns the position of a cell in the cells collection of a table row |
| colSpan | Sets or gets the colspan attribute |
| headers | Sets or gets the headers attribute |
| height | Not supported in HTML5.
Sets or gets the height of a data cell Use style.height instead |
| noWrap | Not supported in HTML5.
Sets or gets whether the content in a cell can be wrapped Use style.whiteSpace instead |
| rowSpan | Sets or gets the rowspan attribute |
| vAlign | Not supported in HTML5.
Sets or gets the vertical alignment of the content within a cell Use style.verticalAlign instead |
| width | Not supported in HTML5.
Sets or gets the width of a data cell Use style.width instead |
The TableHeader object supports the standard properties and events.