🥇 ▷ Aprendiendo HTML Parte 22: Uso de los elementos Head, Tbody y Tfoot en tablas HTML

Las filas de la tabla se pueden dividir en la tabla de encabezado, la tabla de pie de página y la tabla de cuerpo, que están representadas por los elementos de encabezado, pie de página y cuerpo. Cada thehead, tfoot y tbody contiene un grupo de filas y cada grupo contiene al menos una fila definida por el elemento

Los elementos

serán muy útiles para escribir una tabla larga, ancha y de más de una página donde también se escriben cada página, las tablas de cabecera y pie. El uso de estos tres elementos lo ayudará a organizar la tabla como desee mediante el uso de estilos CSS y no afectará el diseño de una tabla. Para más detalles, veamos la explicación a continuación:

cabeza de elemento

El elemento thead se usa para agrupar contenido o contenido que está en la parte superior (cabecera) de una tabla. La etiqueta

se escribe como elemento secundario del elemento

, lo que significa que se encuentra dentro del elemento

después de los elementos

o antes de

y < tr>.

En su uso, el elemento

se usa junto con el elemento

que muestra el contenido de una tabla y

que indica la parte inferior (pie) de una tabla.

En HTML5 no hay atributos especiales que se puedan usar para el elemento

, mientras que en HTML4.01 hay varios atributos, a saber, align, bgcolor, char, charoff y valign. Sin embargo, ese atributo está en desuso y solo debe usar CSS para establecer el elemento

elemento del cuerpo

El elemento tbody se usa para agrupar contenido o contenido que se encuentra en el medio (cuerpo) de una tabla. La etiqueta

debe incluirse a menos que la tabla contenga solo una tabla de cuerpo y no tenga una tabla principal o una tabla de pies.

En su uso, el elemento

se usa junto con el elemento

que indica la parte superior (cabeza) de la mesa y

que indica la parte inferior (pie) de una mesa.

En HTML5 no hay atributos especiales que se puedan usar para el elemento

, mientras que en HTML4.01 hay varios atributos, a saber, align, bgcolor, char, charoff y valign. Sin embargo, ese atributo está en desuso y solo debe usar CSS para establecer el elemento

elemento de pie

El elemento tfoot se utiliza para agrupar contenido o contenido que se encuentra en la parte inferior (pie) de una tabla. En su uso, el elemento

se usa junto con el elemento

que muestra el contenido de una tabla y

que muestra la parte superior (cabecera) de una tabla. La etiqueta de apertura

se incluye si existe la tabla tfoot y se puede omitir la etiqueta de cierre

En HTML5 no hay atributos especiales que se puedan usar para el elemento

, mientras que en HTML4.01 hay varios atributos, a saber, align, bgcolor, char, charoff y valign. Sin embargo, ese atributo está en desuso y solo debe usar CSS para establecer el elemento

Lo que hay que recordar es que thead, tbody, tfoot deben contener el mismo número de columnas. El siguiente es un ejemplo de cómo escribir código y usar estos tres elementos en HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Grup Baris di HTML</title>
   <style type="text/css">
    table,th, td {
    border: 1px solid black;
    border-collapse: collapse;
    width: 20%; }
    tfoot { border:3px solid red; }
   </style>
  </head>
  <body>
   <table>
    <tfoot> <!-- Meskipun elemen tfoot diletakkan di paling depan, hasilnya di browser berada di paling bawah>
     <tr>
      <td>Rata-Rata</td>
      <td>16</td>
     </tr>
    </tfoot>
    <tbody>
     <tr>
      <td>011402001</td>
      <td>15</td>
     </tr>
     <tr>
      <td>011402002</td>
      <td>17</td>
     </tr>
    </tbody>
    <thead>
     <tr>
      <th>NIM</th>
      <th>Poin</th>
     </tr>
    </thead>
  </table>
 </body>
</html>

El resultado en el navegador es así:

uso de tbody tfoot

Como puede ver en el código HTML de arriba, aunque puse el elemento tfoot al frente (después de la etiqueta de apertura

), en el navegador los resultados estarán en la parte inferior porque la función de este elemento tfoot agrupa la celda contenido o el contenido en la parte inferior de la tabla. Lo mismo ocurre con el elemento thead que agrupa el contenido de la celda al principio (head) de la tabla y el elemento tbody en el medio de la tabla.

¿Cómo? ¿Entiendes la función de estos tres elementos? Si lo entiende, continúe con el siguiente material sobre el uso de etiquetas col, colgroups y subtítulos.

Tabla de Contenido

Aprendiendo HTML Parte 23: Uso de etiquetas Col, Colgroup y Caption en tablas HTML