La propiedad de encabezados HTML DOM TableHeader se utiliza para establecer o devolver el valor del atributo de encabezados. El atributo del encabezado se usa para especificar la celda de la tabla que contiene la información del encabezado para la celda del encabezado actual.
Sintaxis
- Devuelve la propiedad del encabezado.
tableheaderObject.headers
- Se utiliza para establecer la propiedad del encabezado.
tableheaderObject.headers = header_ids
Valores de propiedad: contiene el valor, es decir, header_ids, que especifica la lista separada de id para una o más celdas de encabezado.
Valor de retorno: devuelve un valor de string que representa la lista separada de ID de lista de encabezado.
Ejemplo 1 : este ejemplo devuelve la propiedad de un encabezado.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table
{
border: 2px solid black;
}
td
{
border: 1px dotted green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader headers property</b>
<table>
<tr>
<th id="tableHeaderID" headers="username">
Username
</th>
</tr>
<tr>
<td>Sachin</td>
<td>Suraj</td>
<td>Gauri</td>
</tr>
</table>
<br>
<button onclick="getHeader()">
Click to get table header
</button>
<p id="paraID" style="font-size:20px;color:green">
</p>
<!-- Script to access th element -->
<script>
function getHeader() {
var tab = document.getElementById("tableHeaderID").headers;
document.getElementById("paraID").innerHTML = tab;
}
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra la configuración de la propiedad del encabezado.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table
{
border: 2px solid black;
}
td
{
border: 1px dotted green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader headers property</b>
<table>
<tr>
<th id="tableHeaderID" headers="username">
Username
</th>
</tr>
<tr>
<td>Sachin</td>
<td>Suraj</td>
<td>Gauri</td>
</tr>
</table>
<br>
<button onclick="getHeader()">
Click to get table header value
</button>
<p id="paraID" style="font-size:18px;color:green">
</p>
<!-- Script to access th element -->
<script>
function getHeader() {
var tab = document.getElementById(
"tableHeaderID").headers = "user_firstname";
document.getElementById("paraID").innerHTML =
"The value of the headers attribute was changed to: " + tab;
}
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Firefox
- Ópera
- Safari
- Internet Explorer/Borde
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA