El objeto HTML DOM tfoot se utiliza para representar el elemento HTML <tfoot> . El objeto <tfoot> se utiliza para agrupar el contenido de la tabla HTML para la parte de pie de página del documento. El objeto <tfoot> se usa con los elementos <thead> , <tbody> del documento HTML. Hoy en día, el objeto <tfoot> está obsoleto y no está en uso.
Acceso al objeto tfoot: Podemos acceder fácilmente al objeto tfoot usando el método getElementById() .
Sintaxis:
document.getElementById()
Valores de propiedad
- align : establece la alineación del contenido del texto.
- valign: Se utiliza para establecer la alineación vertical del contenido del texto.
- char : alinea el contenido de una celda de encabezado con un carácter.
- charoff: Se utiliza para establecer el número de caracteres que se alinearán a partir del carácter especificado por el atributo char. El valor de estos atributos está en forma numérica.
Ejemplo 1: El siguiente código HTML ilustra cómo cambiar el color de fondo de un elemento <tfoot>.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid green;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<p><b>HTML DOM TFoot Object </b></p>
<table>
<thead>
<tr>
<td>Username</td>
<td>User_Id</td>
</tr>
</thead>
<tbody>
<tr>
<td>Shashank</td>
<td>@shashankla</td>
</tr>
<tfoot id="tfootID" bgcolor="green">
<tr>
<td>GeeksforGeeks</td>
<td>@geeks</td>
</tr>
</tfoot>
</tbody>
</table>
<p>
Click on the button to change the
background color of tfoot element
</p>
<button onclick="btnclick()">
Click here
</button>
<p id="paraID"></p>
</center>
<script>
function btnclick() {
var thead = document
.getElementById("tfootID");
thead.style.backgroundColor = "red";
}
</script>
</body>
</html>
Producción:
Creando un objeto tfoot: Podemos crear fácilmente un objeto tfoot usando lo siguiente.
Sintaxis:
document.createElement()
Ejemplo 2: El siguiente código HTML se usa para crear un objeto tfoot usando un método createElement() .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid green;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<h2>HTML DOM tfoot object</h2>
<table id="tableID">
<thead>
<tr>
<td>Name</td>
</tr>
</thead>
<tr>
<td>Manas</td>
</tr>
<tr>
<td>Hritik</td>
</tr>
</thead>
</table>
<p>
Click button to create tfoot element.
</p>
<button onclick="btnclick()">
Click here
</button>
</center>
<script>
function btnclick() {
/* Create tfoot element */
var X = document.createElement("TFOOT");
/* Create tr element */
var Y = document.createElement("TR");
/* Create td element */
var Z = document.createElement("TD");
Z.innerHTML = "Govind";
Y.appendChild(Z);
X.appendChild(Y);
document.getElementById(
"tableID").appendChild(X);
}
</script>
</body>
</html>
Producción:
Los navegadores compatibles se enumeran a continuación:
- cromo 1.0
- Borde 12.0
- Firefox 1.0
- Internet Explorer 5.5
- Ópera 12.1
- Safari 3.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA