HTML thead

La etiqueta <thead> en HTML es utilizada para definir un bloque que contiene las celdas de encabezado de una tabla. El contenido dentro de esta etiqueta se considera como un encabezado de tabla y se utiliza para describir el contenido de las columnas de la tabla.

El contenido dentro de la etiqueta <thead> se presenta en negrita y centrado por defecto en los navegadores web. También se puede utilizar para aplicar estilos específicos al encabezado de la tabla mediante CSS.

Ejemplo de uso

Aquí tienes un ejemplo de cómo utilizar la etiqueta <thead> en HTML para crear un encabezado de tabla:

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Juan</td>
      <td>Pérez</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>Gómez</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Pedro</td>
      <td>López</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <thead> contiene una fila <tr> con tres celdas <th> que representan los encabezados de las columnas “Nombre”, “Apellido” y “Edad”.

El contenido dentro de la etiqueta <tbody> representa el cuerpo de la tabla, donde se encuentran los datos de cada fila.

Atributos

La etiqueta <thead> en HTML no tiene atributos específicos. Sin embargo, puede contener atributos globales como “id”, “class”, “style”, entre otros.

Estos atributos son comunes a la mayoría de las etiquetas HTML y son útiles para aplicar estilos y realizar acciones dinámicas en la tabla mediante JavaScript y CSS.

Ejemplo

Un ejemplo de cómo utilizar la etiqueta <thead> con algunos de sus atributos en HTML podría ser el siguiente:

<table>
  <thead align="center" valign="bottom">
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
      <td>Dato 3</td>
    </tr>
    <tr>
      <td>Dato 4</td>
      <td>Dato 5</td>
      <td>Dato 6</td>
    </tr>
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se usan los atributos “align” y “valign” para alinear el contenido del encabezado de la tabla al centro y al fondo, respectivamente.

Además, dentro de la etiqueta <thead> se encuentra una fila <tr> con varias celdas de encabezado <th> que contienen el texto “Encabezado 1”, “Encabezado 2” y “Encabezado 3”.

Otro ejemplo:

Otro ejemplo de cómo utilizar varios atributos en la etiqueta <thead> en HTML:

<table>
  <thead align="center" valign="middle" bgcolor="#ffcc99">
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Juan</td>
      <td>Pérez</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>García</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se utilizan los atributos “align”, “valign” y “bgcolor” para alinear el contenido de la etiqueta <thead> al centro, ajustar la verticalidad del texto a la mitad y cambiar el color de fondo a “#ffcc99” respectivamente.