Elemento thead

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento thead contiene a un bloque de filas (tr) que representa a la sección de encabezado de una tabla (table), donde las celdas de encabezado (th) son encontradas habitualemnte. Este elemento puede ser útil para especificar qué filas proveen información de encabezado para el resto de la tabla. De todos modos, no es requerido que las celdas de encabezado pertenezcan a una sección de encabezado y pueden tranquilamente ser declaradas directamente en el elemento table.

El elemento thead solo puede estar presente una vez en la tabla y debe ubicarse justo antes de su cuerpo.

En versiones previas del estándar, el elemento thead tenía varios atributos de presentación que han sido eliminados en HTML5. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplos

En el siguiente ejemplo declararemos una tabla (table) con una sección de encabezado (thead), que contendrá una fila de celdas de encabezado (th). Estas celdas de encabezado proveerán un título para cada celda en la columna. Las celdas regulares serán contenidas en la sección del cuerpo (tbody).

<table class="default">
  <thead>
    <tr>
      <th>Libro</th>
      <th>Autor</th>
      <th>Publicado</th>
      <th>Ventas (en millones)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Historia de dos ciudades</td>
      <td>Charles Dickens</td>
      <td>1859</td>
      <td>200</td>
    </tr>
    <tr>
      <td>El señor de los anillos</td>
      <td>J. R. R. Tolkien</td>
      <td>1954-1955</td>
      <td>150</td>
    </tr>
    <tr>
      <td>El principito</td>
      <td>Antoine de Saint-Exupéry</td>
      <td>1943</td>
      <td>140</td>
    </tr>
  </tbody>
</table>
Libro Autor Publicado Ventas (en millones)
Historia de dos ciudades Charles Dickens 1859 200
El señor de los anillos J. R. R. Tolkien 1954-1955 150
El principito Antoine de Saint-Exupéry 1943 140

Ahora es tiempo de llevar al elemento un poco más allá. En el siguiete ejemplo usaremos celdas regulares en la sección de encabezado de la tabla, junto con celdas de encabezado. En este caso particular, las celdas regulares proveerán información detallada acerca de la columna, expandiendo el contenido de la celda de encabezado.

<table class="default">
  <thead>
    <tr>
      <th>Destino</th>
      <th>En auto</th>
      <th>En bicicleta</th>
      <th>Caminando</th>
    </tr>
    <tr>
      <td></td>
      <td>a 20 mph (promedio)</td>
      <td>a 9.3 mph (promedio)</td>
      <td>a 3.1 mph (promedio)</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hospital</td>
      <td>55 min</td>
      <td>1 h 40 min</td>
      <td>5 h 50 min</td>
    </tr>
    <tr>
      <td>Biblioteca</td>
      <td>15 min</td>
      <td>25 min</td>
      <td>1 h 5 min</td>
    </tr>
    <tr>
      <td>Casa de Mary</td>
      <td>35 min</td>
      <td>1 h 5 min</td>
      <td>3 h 20 min</td>
    </tr>
  </tbody>
</table>
Destino En auto En bicicleta Caminando
a 20 mph (promedio) a 9.3 mph (promedio) a 3.1 mph (promedio)
Hospital 55 min 1 h 40 min 5 h 50 min
Biblioteca 15 min 25 min 1 h 5 min
Casa de Mary 35 min 1 h 5 min 3 h 20 min

En el ejemplo anterior no puedes ver la diferencia entre las celdas regulares del encabezado (thead) y aquellas en el cuerpo (tbody). Sin embargo, sus significados son diferentes, tal como se define en el código. Los autores puede estilizar las celdas regulares en la sección de encabezado para mejorar su interpretación.

Atributos

Atributos específicos

align

La alineación horizontal del texto en todas las celdas afectadas. Existen cinco valores posibles (insensibles a mayúsculas/minúsculas):

  • left: el texto se alinea a la margen izquierda. Este es el valor predeterminado para celdas de datos (td).
  • center: el texto es centrado. Este es el valor predeterminado para celdas de encabezado (th).
  • right: el texto se alinea a la margen derecha.
  • justify: el texto es justificado o alineado a ambas márgenes.
  • char: el texto se alinea a un carácter específico. Se utiliza en conjunto con el atributo char.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<thead align="center">

char

Un carácter que actuará como eje para la alineación del texto. Está pensado para trabajar junto con el atributo align cuando presenta el valor "char". En otras situaciones será completamente ignorado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso es consecuentemente inválido. Se aconseja a los autores reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<thead align="char" char="c">

charoff

Un desplazamiento, desde la primera aparición del carácter de alineación (especificado en el atributo char) y en la dirección del texto. El carácter resultante de este cálculo será el eje para la alineación del texto.

Para que este atributo sea considerado, el valor del atributo align debe ser "char" y el atributo char debe estar presente.

Este atributo es considerado obsoleto por HTML5 y su uso ya no es recomendado. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<thead align="char" char="t" charoff="7">

valign

La alineación vertical del texto en todas las celdas afectadas. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):

  • top: el texto se alinea a la margen superior.
  • middle: el texto es centrado verticalmente.
  • bottom: el texto se alinea a la margen inferior.
  • baseline: todas las celdas en una fila con esta misma alineación deberían tener su primera línea de texto en una línea base común.

Este atributo es obsoleto de acuerdo con el estándar HTML5 y, por lo tanto, inválido. Se aconseja a los autores evitar su uso y reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<thead valign="top">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.