Elemento th

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 th representa a una celda de encabezado en una tabla (table). Las celdas de encabezado están pensadas para proveer información de encabezado para las celdas de datos (td). Por lo tanto, es común encontrar a este tipo de celdas dentro de filas (tr) que son parte de la sección de encabezado (thead) o pie (tfoot) de una tabla.

Los atributos colspan y rowspan pueden ser usados para hacer que las celdas abarquen dos o más celdas en dirección horizontal o vertical, respectivamente.

El elemento th, junto con el elemento td, sólo puede estar presente como hijo de un elemento tr.

En versiones previas del estándar, el elemento th 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

El siguiente ejemplo representa una tabla (table) con un número de filas que contienen celdas de datos (td) y celdas de encabezado (th).

<table class="default">
  <tr>
    <th>Libro</th>
    <th>Autor</th>
    <th>Año</th>
  </tr>
  <tr>
    <td>Regeneration</td>
    <td>Pat Barker</td>
    <td>1991</td>
  </tr>
  <tr>
    <td>Sálvese quien pueda</td>
    <td>Beryl Bainbridge</td>
    <td>1996</td>
  </tr>
  <tr>
    <td>Affinity</td>
    <td>Sarah Waters</td>
    <td>1999</td>
  </tr>
</table>
Libro Autor Año
Regeneration Pat Barker 1991
Sálvese quien pueda Beryl Bainbridge 1996
Affinity Sarah Waters 1999

Ahora, haremos que un par de celdas abarquen el espacio de otras en la misma fila. Esta es una tarea bastance sencilla, ya que sólo precisamos especificar el número de celdas hacia la derecha que estaremos unificando (en el atributo colspan) y luego continuar con la declaración de celdas teniendo en cuenta el número de celdas unificadas.

<table class="default">
  <tr>
    <th>Basic account</th>
    <th>Full account</th>
    <th>Premium account</th>
  </tr>
  <tr>
    <th colspan="2">Free</th>
    <th>Paid</th>
  </tr>
  <tr>
    <td>64 kbps</td>
    <td>96 kbps</td>
    <td>128 kbps</td>
  </tr>
  <tr>
    <td>20 connections</td>
    <td>50 connections</td>
    <td>100 connections</td>
  </tr>
</table>
Basic account Full account Premium account
Free Paid
64 kbps 96 kbps 128 kbps
20 connections 50 connections 100 connections

Por último, unificaremos algunas celdas en la misma columna. Esta vez, tendrás que prestar atención a las celdas unificadas mientras defines filas subsiguientes, para evitar declarar más celdas de las necesarias. Esto puede resultar algo confuso al principio, debido a la estructura de las tablas en HTML que consiste en un conjunto de filas (y no columnas) que contienen celdas.

Asimismo, haremos uso del atributo scope en la celda ubicada en la esquina superior izquierda de la tabla, para asegurarnos de que el navegador entienda para qué celda ésta provee información de encabezado (aquellas en la misma columna).

<table class="default">
  <tr>
    <th scope="col">Período</th>
    <th>Tema</th>
    <th>Nota</th>
  </tr>
  <tr>
    <th rowspan="2">1º semestre</th>
    <td>Matemáticas</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Historia</td>
    <td>7</td>
  </tr>
  <tr>
    <th rowspan="2">2º semestre</th>
    <td>Biología</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Literatura</td>
    <td>7</td>
  </tr>
</table>
Período Tema Nota
1º semestre Matemáticas 10
Historia 7
2º semestre Biología 8
Literatura 7

Nota como en las filas tercera y quinta del ejemplo anterior, hemos declarado solo dos celdas, aún cuando la tabla tiene tres columnas. Esto es así, debido a que la primera celda en la segunda y cuarta fila han ocupado el lugar de las que tienen debajo (las que no han sido declaradas).

Cuando se usan juntos en una tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

Atributos

Atributos específicos

colspan

El número de celdas hacia la derecha que esta celda debería abarcar. Como resultado, esta celda tendrá un ancho igual a su ancho original más el ancho de las celdas que está abracando.

Cuando se usan juntos en una tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

Ejemplo

<table class="default">
  <tr>
    <th colspan="2">Encabezado 1</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>
Encabezado 1
Celda 1 Celda 2

rowspan

El número de celdas hacia abajo que esta celda debería abarcar. Si este atributo toma el valor cero ("0"), la celda abarcará todas las celdas restantes en el grupo de filas (thead, tbody o tfoot). Como resultado, esta celda tendrá una altura igual a su altura original más la altura de las celdas que está abracando.

Cuando se usan juntos en una tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

Ejemplo

<table class="default">
  <tr>
    <th rowspan="2">Encabezado 1</th>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
  </tr>
</table>
Encabezado 1 Celda 2
Celda 3

headers

Una lista de identificadores únicos separados por espacios, cada uno de los cuales concuerda con el atributo id de una celda de encabezado (th) en la misma tabla. Las celdas apuntadas en este atributo proveerán información de encabezado para esta celda.

Este atributo es rara vez necesario, y sólo se requiere en tablas muy complejas. En la mayoría de los casos el atributo scope de las celdas de encabezado (th) será suficiente para lograr tablas accesibles.

Ejemplo

<th headers="periodo mes">November</th>

scope

Un grupo de celdas para las cuales esta celda brinda información de encabezado. Los valores posibles (insensibles a mayúsculas/minúsculas) son:

  • row: todas la celdas en la misma fila.
  • col: todas la celdas en la misma columna.
  • rowgroup: todas la celdas en el mismo grupo de filas (thead, tbody o tfoot).
  • colgroup: todas la celdas en el mismo grupo de columnas (colgroup).
  • auto: los navegadores deciden cuáles son las celdas afectadas basados en un análisis del contexto. Este es el valor por defecto.

En la mayoría de los casos, el atributo scope puede omitirse para dejar a los navegadores deducir las celdas afectadas por el encabezado. Pero cuando existe cualquier posibilidad de ambigüedad, la presencia de este atributo es altamente recomendable.

Ejemplo

<table class="default">
  <tr>
    <th scope="col">Planeta</th>
    <th>Diámetro (km)</th>
    <th>Distancia al Sol (en millones de km)</th>
  </tr>
  <tr>
    <th>Mercurio</th>
    <td>4,878</td>
    <td>57</td>
  </tr>
  <tr>
    <th>Venus</th>
    <td>12,104</td>
    <td>107</td>
  </tr>
</table>
Planeta Diámetro (km) Distancia al Sol (en millones de km)
Mercurio 4,878 57
Venus 12,104 107

abbr

Una versión alternativa del contenido de la celda, que puede ser usada por los navegadores cuando resulte apropiado como, por ejemplo, al describir los encabezados que se aplican a una celda en particular. El valor de este atributo es típicamente una versión más corta del contenido de la celda, pero podría también dar una descripción alternativa o complementaria.

Ejemplo

<table class="default">
  <tr>
    <th abbr="Ingresos">Ingresos por productos vendidos</th>
    <th abbr="Gastos">Gastos generales de la familia</th>
  </tr>
  <tr>
    <td>$2,564.54</td>
    <td>$1,552.22</td>
  </tr>
</table>
Ingresos por productos vendidos Gastos generales de la familia
$2,564.54 $1,552.22

axis

Una lista de nombres de categorías separados por comas a las que esta celda pertenece. Estas categorías conceptuales pueden formar grupos de celdas que muestran información relacionada bajo algún punto de vista. Los navegadores pueden usar la información en este atributo para mostrar y relacionar estas categorías.

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 el atributo scope de las celdas de encabezado (th).

Ejemplo

<td axis="ingreso beneficio financiero">

align

La alineación horizontal del texto en la celda. 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

<td 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

<td 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

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

valign

La alineación vertical del texto en la celda. 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

<td valign="top">

width

Un valor que indica el ancho de la celda, en píxeles o como un porcentaje relativo al espacio horizontal disponible. Los navegadores pueden adaptar este valor de acuerdo a la disponibilidad del espacio.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<td width="25%">

height

Un número de píxeles que indica la altura recomendada para la celda. Los navegadores pueden adaptar este valor de acuerdo al conetido de la celda.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<td height="110">

nowrap

Un valor booleano que indica si los navegadores deberían deshabilitar el quiebre automático de texto para el contenido de la celda.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<td nowrap>

bgcolor

Un color para rellenar el fondo del elemento.

El atributo bgcolor ha sido eliminado del estándar HTML5 debido a su naturaleza visual. Sus resultados pueden ser perfectamente logrados con hojas de estilo.

Ejemplo

<td bgcolor="#00ccee">

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.