Las etiquetas <thead> y <tfoot> se utilizan para separar la tabla en encabezado y pie de página, lo que se vuelve útil cuando se trata de tablas que tienen una gran cantidad de datos.
En este artículo, discutiremos cómo usar las etiquetas de encabezado y pie de página en HTML. Para ello, hemos creado una tabla HTML utilizando las etiquetas <thead>, <tbody> y <tfoot>.
Etiqueta HTML <thead>: la etiqueta <thead> en HTML se usa para crear un encabezado de tabla y generalmente aparece después de las etiquetas <colgroup> o <caption> y debe aparecer antes de las etiquetas <tbody> y <tfoot>.
Sintaxis:
<thead>Table header content</thead>
Etiqueta HTML <tbody>: La etiqueta <tbody> en HTML se usa para agrupar el contenido de la tabla y generalmente se usa junto con las etiquetas <thead> y <tfoot>. Debe declararse después de la etiqueta <thead> y puede declararse antes o después de la etiqueta <tfoot> en HTML.
Sintaxis:
<tbody>Table body content</tbody>
Etiqueta HTML <tfoot>: la etiqueta <tfoot> en HTML se usa para crear un pie de página de tabla que aparece después de la etiqueta <thead> y se puede declarar antes de la etiqueta <tbody> pero el navegador lo leerá tal como se ha declarado. después de la etiqueta <tbody>. Se recomienda usarlo después de la etiqueta <tbody>.
Sintaxis:
<tfoot>Table footer content</tfoot>
Nota: El uso de la etiqueta de encabezado y pie de página en HTML no hará ninguna diferencia en las filas en comparación con otras filas, pero ayudará al navegador a distinguir entre los datos y la sección de encabezado y pie de página en la tabla.
Ejemplo : en el siguiente código, hemos utilizado las etiquetas de encabezado y pie de página en la tabla HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content=
"width=device-width, initial-scale=1.0">
<style>
thead,
tfoot {
background-color: green;
color: white;
}
tr th {
background-color: green;
color: white;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table width="70%" height="170px"
border cellspacing="0">
<!-- thead tag specifies the header of
this table and starts here -->
<thead>
<tr>
<th>Items/Kg</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<!-- thead tag ends here -->
<!-- tbody tag specifies the body of
this table and starts here -->
<tbody>
<tr>
<th>Oranges</th>
<td>₹40</td>
<td>₹80</td>
<td>₹40</td>
<td>₹120</td>
<td>₹40</td>
</tr>
<tr>
<th>Mangoes</th>
<td>₹60</td>
<td>₹85</td>
<td>₹50</td>
<td>₹100</td>
<td>₹30</td>
</tr>
<tr>
<th>Apples</th>
<td>₹80</td>
<td>₹90</td>
<td>₹120</td>
<td>₹120</td>
<td>₹90</td>
</tr>
</tbody>
<!-- tbody tag ends here -->
<!-- tfoot tag specifies the footer of
this table and starts here -->
<tfoot>
<tr>
<th>Total</th>
<td>₹180</td>
<td>₹255</td>
<td>₹210</td>
<td>₹340</td>
<td>₹160</td>
</tr>
</tfoot>
<!-- tfoot tag ends here -->
</table>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por subodhray5221 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA