Etiqueta th de HTML - Aprende HTML

La etiqueta <th> especifica una celda de encabezado en una tabla HTML. Debe usarse como elemento hijo de <tr>, que a su vez se coloca dentro de la etiqueta <table>. Para definir una celda de datos estándar, se utiliza la etiqueta <td>.

Esta página explica qué hace <th>, cómo abarcar celdas con colspan y rowspan y, lo más importante, cómo hacer que los encabezados de tabla sean accesibles con el atributo scope y el patrón id/headers para que los lectores de pantalla puedan anunciar el encabezado correcto en cada celda.

La etiqueta <th> puede contener texto, imágenes, formularios, enlaces u cualquier otro elemento HTML que pueda usarse en el cuerpo de un documento HTML. El tamaño de la tabla se ajusta automáticamente según el tamaño de su contenido.

En las tablas HTML, los datos se organizan verticalmente en columnas. Si desea mostrar la primera fila de la tabla como etiquetas o encabezados, debe usar elementos <th> en lugar de elementos <td> para esa fila. De manera predeterminada, el contenido de la etiqueta <th> es negrita y está centrado. Para cambiar su apariencia, puede utilizar estilos CSS. Los encabezados de tabla también pueden estilizarse de forma independiente del resto del contenido de la tabla.

Tenga en cuenta que todas las filas de una tabla deben tener el mismo número de celdas. Si una fila tiene menos celdas, el navegador renderiza las celdas faltantes de forma implícita. Estas celdas implícitas heredan los estilos de borde de la tabla. Si necesita indicar que otras celdas no contienen datos, cree celdas vacías donde sea necesario. Si las celdas implícitas aparecen de forma consecutiva, pueden renderizarse como una sola celda combinada.

Sintaxis

La etiqueta <th> viene en pares. El contenido se escribe entre las etiquetas de apertura (<th>) y cierre (</th>).

Etiqueta HTML <th>

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</table>

Ejemplo de la etiqueta HTML `<th>`:

Mes y Fecha — Ejemplo de la etiqueta HTML <th> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>June</td>
          <td>18.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En este ejemplo, nuestros encabezados son "Month" y "Date", que definimos usando etiquetas <th>. Colocamos ambas etiquetas dentro de un elemento <tr>.

El atributo colspan generalmente se usa con la etiqueta <th> para que el contenido abarque varias columnas. Veamos esto en acción.

Ejemplo de la etiqueta HTML `<th>` con el atributo colspan:

Ejemplo con atributo colspan — Etiqueta HTML <th> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      tr {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="2">Month and Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jun</td>
          <td>18.07.2014</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Pruébalo tú mismo »

En este ejemplo, el valor del atributo colspan es "2". Esto significa que la única celda de encabezado se extiende a lo largo de dos columnas.

Ejemplo de la etiqueta HTML `<th>` con el atributo rowspan

El atributo rowspan es el equivalente vertical de colspan: hace que una celda de encabezado abarque varias filas. Esto es útil cuando un encabezado se aplica a varias filas de datos.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Day</th>
          <th>Slot</th>
          <th>Activity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="2" scope="rowgroup">Monday</th>
          <td>Morning</td>
          <td>HTML basics</td>
        </tr>
        <tr>
          <td>Afternoon</td>
          <td>CSS basics</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Aquí la celda de encabezado "Monday" usa rowspan="2", por lo que cubre tanto la fila de la mañana como la de la tarde.

El atributo scope

La característica de accesibilidad más importante de <th> es el atributo scope. Indica a la tecnología de asistencia —especialmente a los lectores de pantalla— qué celdas describe un encabezado. Los usuarios con visión infieren esto a partir del diseño, pero un lector de pantalla lee las celdas una a la vez y necesita scope para anunciar el encabezado correcto antes de cada celda de datos.

scope acepta cuatro valores significativos:

Valor	El encabezado se aplica a…
`col`	cada celda en la columna que está debajo
`row`	cada celda en la fila a su derecha
`colgroup`	un grupo de columnas (se usa con `<colgroup>`)
`rowgroup`	un grupo de filas (p. ej., todas las filas dentro de un `<tbody>`)

Una tabla puede tener encabezados en ambas direcciones. Los encabezados de columna se colocan en <thead> con scope="col"; la etiqueta inicial de una fila es un <th scope="row"> dentro del <tbody>.

Ejemplo de una tabla completamente accesible usando scope

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
        text-align: left;
      }
      thead th,
      tbody th {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Weekly study plan</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Topic</th>
          <th scope="col">Hours</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Monday</th>
          <td>HTML</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">Tuesday</th>
          <td>CSS</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Cuando un usuario de lector de pantalla llega a la celda que contiene 3, puede anunciar "Tuesday, Hours, 3" porque el encabezado de columna (scope="col") y el encabezado de fila (scope="row") son ambos inequívocos.

Accesibilidad

Por qué importa scope

Una tabla de datos es una cuadrícula de relaciones: cada <td> pertenece a uno o más encabezados. Los usuarios con visión leen esas relaciones visualmente; los usuarios de lectores de pantalla no lo hacen. Marcar las celdas de encabezado con <th> y darles un scope correcto es lo que permite a la tecnología de asistencia leer el encabezado correcto en voz alta mientras el usuario navega por la tabla. Sin esto, una tabla compleja es simplemente una secuencia de valores desconectados.

`<th>` frente a `<td role>`

Use siempre un elemento <th> real para los encabezados en lugar de dar estilo a un <td> para que parezca negrita. Un <th> lleva semántica de encabezado automáticamente; un <td> simple no, independientemente de cómo se vea. Recurrir a role="columnheader" o role="rowheader" en un <td> debe ser el último recurso (por ejemplo, cuando no se puede cambiar el marcado). El <th> nativo con scope es más sencillo y está mejor soportado.

El patrón `id` / `headers` para tablas complejas

scope funciona bien para cuadrículas simples, pero no puede expresar todas las relaciones en tablas con spans irregulares o múltiples niveles de encabezado. Para esas, asigne a cada encabezado un id y enumere los ids de encabezado relevantes en cada celda de datos mediante el atributo headers (separado por espacios). Esto vincula explícitamente cada celda con sus encabezados.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { border-collapse: collapse; margin: 30px auto; }
      th, td { padding: 10px; border: 1px solid #666; }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="name">Name</th>
          <th id="q1">Q1</th>
          <th id="q2">Q2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="alice" headers="name">Alice</th>
          <td headers="alice q1">120</td>
          <td headers="alice q2">150</td>
        </tr>
        <tr>
          <th id="bob" headers="name">Bob</th>
          <td headers="bob q1">90</td>
          <td headers="bob q2">110</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Ahora la celda con 150 está explícitamente asociada tanto con el encabezado de fila Alice como con el encabezado de columna Q2, por lo que un lector de pantalla puede anunciar "Alice, Q2, 150" sin necesidad de adivinar.

El atributo `abbr`

Cuando el texto completo de un encabezado es largo, el atributo abbr proporciona una versión corta. Algunos navegadores de voz leen esta forma abreviada (en lugar de repetir el encabezado largo) cada vez que anuncian una celda de esa columna, lo que hace que navegar por tablas anchas sea mucho menos tedioso.

<th scope="col" abbr="HDI">Human Development Index</th>

El texto visible sigue siendo "Human Development Index", pero un lector de pantalla puede anunciar cada celda de esa columna simplemente como "HDI".

Atributos

Solo abbr, colspan, rowspan, headers y scope son válidos en HTML5. Las filas marcadas como Obsoleto a continuación son atributos de presentación obsoletos — no los utilice; logre el mismo resultado con CSS en su lugar.

Atributo	Valor	Descripción
abbr	texto	Define una versión abreviada del contenido de una celda de encabezado. Algunos agentes de usuario, como los lectores de voz, pueden anunciar esta forma corta en lugar del texto completo.
colspan	número	Define el número de columnas que debe abarcar una celda. El valor debe ser un entero positivo. El valor predeterminado es 1.
headers	header_id	Una lista separada por espacios de ids de celdas de encabezado que describen esta celda. Cada valor debe coincidir con el `id` de una celda de encabezado. Se usa para tablas complejas.
rowspan	número	El número de filas que debe abarcar una celda. El valor debe ser un entero positivo. El valor predeterminado es 1. Los valores superiores a 65534 se recortan a 65534.
scope	col / colgroup / row / rowgroup	Declara a qué celdas se refiere el encabezado. Esencial para la accesibilidad de las tablas.
align	left / right / center	Obsoleto. Alineaba el contenido. Use CSS `text-align` en su lugar.
axis	category_name	Obsoleto. Categorizaba celdas con contenido similar.
background	url	Obsoleto. Establecía una imagen de fondo. Use CSS `background` en su lugar.
bgcolor	rgb(x,x,x) / #xxxxxx / colorname	Obsoleto. Establecía el color de fondo. Use CSS `background-color`.
bordercolor	color	Obsoleto. Establecía el color del borde. Use CSS `border`.
char	character	Obsoleto. Alineaba el contenido con un carácter (solo con `align="char"`).
charoff	número	Obsoleto. Desplazamiento del carácter de alineación.
height	% / pixels	Obsoleto. Establecía la altura de la celda. Use CSS `height`.
nowrap	nowrap	Obsoleto. Impedía el ajuste del contenido. Use CSS `white-space: nowrap`.
sorted	(varios)	Obsoleto. Definía la dirección de ordenación de una columna.
valign	top / middle / bottom / baseline	Obsoleto. Alineación vertical. Use CSS `vertical-align`.
width	% / pixels	Obsoleto. Establecía el ancho de la celda. Use CSS `width`.

La etiqueta <th> también admite los Atributos Globales y los Atributos de Evento.

Cómo aplicar estilo a una etiqueta HTML `<th>`

th {
  background-color: #f2f2f2;
  color: #333;
  padding: 8px;
  border: 1px solid #ccc;
}

Etiquetas relacionadas

<table> — el contenedor de la tabla
<tr> — una fila de la tabla
<td> — una celda de datos estándar
<thead> — agrupa las filas de encabezado
<tbody> — agrupa las filas del cuerpo
<caption> — el título de la tabla

Práctica

¿Cuál es el propósito principal del elemento th de HTML?

Define una celda de encabezado, otorgándole semántica de encabezado que la tecnología de asistencia puede asociar con las celdas de datos relacionadas.Representa una celda de datos ordinaria en el cuerpo de una tabla.Agrupa el contenido del pie de página en una tabla larga.Su única función es renderizar el texto en tipografía negrita.Crea una nueva fila en la tabla.

Sintaxis

Ejemplo de la etiqueta HTML <th>: