El objeto TableHeader en HTML DOM se usa para representar el elemento HTML <th>. Se puede acceder al elemento <th> usando el método getElementById().
Sintaxis:
Se utiliza para acceder al elemento <th>.
document.getElementById("id");
Se utiliza para crear el elemento <th>.
document.createElement("th");
Propiedades del objeto TableHeader:
| Propiedad | Descripción |
|---|---|
| abreviar | Esta propiedad se utiliza para establecer o devolver el valor del atributo abbr. |
| alinear | Esta propiedad se usa para establecer o devolver la alineación horizontal del contenido en una celda de datos. |
| vAlinear | Esta propiedad se usa para establecer o devolver la alineación vertical del contenido dentro de una celda. |
| ancho | Esta propiedad se usa para establecer o devolver el ancho de una celda de datos. |
| eje | Esta propiedad se utiliza para establecer o devolver una lista separada por comas de celdas de datos relacionadas. |
| antecedentes | Esta propiedad se usa para establecer o devolver la imagen de fondo de una celda de datos. |
| bgColor | Esta propiedad se usa para establecer o devolver el color de fondo de una tabla. |
| índice de celda | Esta propiedad se utiliza para devolver la posición de una celda en la colección de celdas de una fila de la tabla. |
| ch | Esta propiedad se usa para establecer o devolver un carácter de alineación para una celda de datos. |
| chOff | Esta propiedad se usa para establecer o devolver el desplazamiento horizontal de la propiedad ch. |
| colSpan | Esta propiedad se utiliza para establecer o devolver el valor del atributo colspan. |
| encabezados | Esta propiedad se utiliza para establecer o devolver el valor del atributo de encabezado. |
| altura | Esta propiedad se usa para establecer o devolver la altura de una celda de datos. |
| sin envoltura | Esta propiedad se usa para establecer o devolver si el contenido de una celda se puede ajustar. |
| intervalo de filas | Esta propiedad se utiliza para establecer o devolver el valor del atributo de rango de filas. |
Ejemplo 1: este ejemplo utiliza el método getElementById() para acceder al elemento <th>.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM TableHeader Object</h2>
<table>
<tr>
<th id = "table">Username</th>
</tr>
<tr>
<td>geeks</td>
</tr>
</table>
<p>
Click on button to change th element.
</p>
<button onclick = "myGeeks()">
Click Here!
</button>
<!-- Script to access th element -->
<script>
function myGeeks() {
var tab = document.getElementById("table");
tab.innerHTML = "User Handle";
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo utiliza el método document.createElement() para crear el elemento <th>.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM TableHeader Object</h2>
<table id = "tab">
<tr id = "mytable">
</tr>
</table>
<p>Click the button to create a th element.</p>
<button onclick = "myGeeks()">
Click Here!
</button>
<!-- script to create th element -->
<script>
function myGeeks() {
/* Create Table Header element */
var tab_row = document.createElement("TH");
/* Set the the text node */
var text = document.createTextNode("Table Header Content");
tab_row.appendChild(text);
document.getElementById("mytable").appendChild(tab_row);
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por divyatagoel0709 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA