Etiqueta thead en HTML: grupo de filas de encabezado

La etiqueta <thead> agrupa las filas de encabezado de una tabla HTML. Sirve para separar las etiquetas de las columnas de los datos del cuerpo y del resumen final. Úsala, por ejemplo, en una tabla de cursos para reunir «Curso» y «Horas», o para organizar una cabecera de varias filas que explique distintos tipos de plazas.

Ejemplo mínimo: encabezados de dos columnas

<table>
  <caption>Duración de los cursos, en horas</caption>
  <thead>
    <tr><th scope="col">Curso</th><th scope="col">Horas</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>12</td></tr>
  </tbody>
</table>

Pega el fragmento en el cuerpo de un documento HTML. Verás el título de la tabla, los encabezados «Curso» y «Horas» y una fila con HTML y 12. Sin CSS, el navegador normalmente muestra los <th> en negrita, pero no dibuja una cuadrícula de bordes.

La primera fila pertenece al grupo de encabezado porque está en <thead>; sus celdas son encabezados porque son <th>. scope="col" indica que cada una encabeza su columna. Cambiar «Horas» por «Duración (horas)» modifica el rótulo, no el grupo.

Sintaxis y contexto válido

Escribe <thead>…</thead> como hijo de <table>, después de <caption> y de los <colgroup> que existan, y antes de <tbody>, <tfoot> o las filas directas de la tabla. Una tabla admite como máximo un <thead>; las distintas filas de la cabecera van dentro de ese mismo grupo.

Su contenido habitual son filas <tr>. Cada fila contiene las celdas <th> o <td>: no coloques celdas directamente en <thead>, ni lo uses para envolver párrafos sueltos. El modelo de contenido del estándar HTML permite cero o más filas y elementos de apoyo a scripts, como <script> o <template>.

Los ejemplos muestran el cierre explícito para hacer visibles los límites. En HTML, </thead> puede omitirse cuando el grupo va seguido inmediatamente por <tbody> o <tfoot>; la etiqueta de apertura no se omite. No es un elemento vacío.

Thead y th: grupo de filas frente a celda

<thead> organiza filas; <th> identifica una celda de encabezado. Una cabecera puede incluir una celda <td> con información auxiliar, pero esa celda sigue siendo de datos. Escribir texto en negrita o colocar un <td> dentro de <thead> no le da semántica de encabezado.

También puede haber <th> dentro de <tbody>. En el caso práctico, el nombre de cada curso encabeza su fila con scope="row". Por tanto, los encabezados de fila pertenecen al cuerpo de datos y no necesitan trasladarse a <thead>. La guía de <th> desarrolla sus atributos y asociaciones.

Caso práctico: thead con varias filas y plazas agrupadas

Guarda este documento como cursos-thead.html en UTF-8 y ábrelo en un navegador. Usa datos ficticios y no necesita servidor, recursos externos ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plazas de los cursos</title>
    <style>
      body {
        max-width: 44rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.5;
        color: #222;
        background: #fff;
      }
      .desplazamiento { max-width: 100%; overflow-x: auto; }
      .desplazamiento:focus-visible { outline: 3px solid #2456a6; }
      .cursos { width: 100%; min-width: 30rem; border-collapse: collapse; }
      .cursos caption { padding-block: 0.75rem; text-align: left; }
      .cursos th, .cursos td {
        padding: 0.5rem;
        border: 1px solid #666;
        text-align: left;
      }
      .cursos thead { background-color: #e8f1ff; }
      .cursos thead th { vertical-align: middle; }
      @media print {
        .desplazamiento { overflow: visible; }
        .cursos { min-width: 0; }
      }
    </style>
  </head>
  <body>
    <h1>Plazas de los cursos</h1>
    <p>Ofertadas indica el cupo total; disponibles, las plazas aún libres.</p>
    <p>En pantallas pequeñas, desplaza la tabla para ver todas las columnas.</p>
    <div class="desplazamiento" role="region"
         aria-label="Tabla de plazas de cursos" tabindex="0">
      <table class="cursos">
        <caption>Oferta de cursos: plazas totales y disponibles</caption>
        <thead>
          <tr>
            <th id="curso" rowspan="2" scope="col">Curso</th>
            <th id="plazas" colspan="2">Plazas</th>
          </tr>
          <tr>
            <th id="ofertadas" headers="plazas" scope="col">Ofertadas</th>
            <th id="disponibles" headers="plazas" scope="col">Disponibles</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th id="html" headers="curso" scope="row">HTML básico</th>
            <td headers="html plazas ofertadas">16</td>
            <td headers="html plazas disponibles">5</td>
          </tr>
          <tr>
            <th id="css" headers="curso" scope="row">CSS</th>
            <td headers="css plazas ofertadas">20</td>
            <td headers="css plazas disponibles">8</td>
          </tr>
          <tr>
            <th id="js" headers="curso" scope="row">JavaScript</th>
            <td headers="js plazas ofertadas">18</td>
            <td headers="js plazas disponibles">3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Verás tres columnas, una cabecera de dos filas con fondo azul claro y tres cursos. «Curso» ocupa las dos filas gracias a rowspan="2"; «Plazas» abarca las columnas «Ofertadas» y «Disponibles» con colspan="2". Agruparlas aclara que ambas cifras cuentan plazas y evita repetir esa palabra en cada rótulo. Para HTML básico hay 16 plazas ofertadas y 5 libres.

Asociaciones claras entre encabezados y datos

Cada <th> tiene un id único. El atributo headers de cada cifra enumera los encabezados de curso, grupo y columna que la describen. Por ejemplo, headers="html plazas disponibles" relaciona el 5 con «HTML básico», «Plazas» y «Disponibles». Los encabezados secundarios también señalan su grupo. Es el enfoque de W3C WAI para tablas con varios niveles de encabezados.

rowspan y colspan definen la extensión de las celdas; no sustituyen las asociaciones. <thead> aporta la agrupación de filas, pero no garantiza un anuncio idéntico en todos los lectores de pantalla. Los rótulos escritos conservan el significado al retirar el fondo o el resto del CSS.

Cómo probarlo y qué cambia al retirar thead

1. En el inspector, comprueba un <thead> con dos <tr> y un <tbody> con tres. Revisa que los valores de headers apunten a <th> de esta misma tabla.
2. En móvil, desplaza la región para leer «Disponibles». Con teclado, llega mediante Tab y usa las flechas horizontales; el contorno indica el foco.
3. Cambia el fondo de .cursos thead: solo cambia la presentación. Desactiva JavaScript: la tabla, las asociaciones y el desplazamiento siguen disponibles.
4. Retira únicamente <thead> y </thead>, conservando sus filas. Al analizar HTML, el navegador puede reunirlas en un cuerpo implícito antes del <tbody> explícito. Los <th> siguen siendo encabezados, pero se pierde el grupo de cabecera y el selector de fondo deja de aplicarse. Retirar también las filas elimina los rótulos y deja referencias headers sin destino.

Impresión y repetición de encabezados

En una tabla que ocupa varias páginas, el navegador puede repetir el grupo de cabecera al imprimir. Para comprobarlo, añade cursos hasta superar una página, con nuevos id y referencias headers coherentes, y abre la vista previa de impresión. Revisa la segunda página y las siguientes, también tras retirar <thead>.

El ejemplo libera el desbordamiento y el ancho mínimo en impresión. La repetición depende del motor, los estilos, el tamaño de página y la configuración de impresión: no es una garantía uniforme. <thead> tampoco crea una cabecera fija al desplazarte en pantalla; ese comportamiento requiere CSS adicional.

Atributos y errores frecuentes

<thead> no tiene atributos específicos vigentes. Admite globales como id, class y lang. scope pertenece a <th>; rowspan, colspan y headers pertenecen a <th> y <td>. background-color, text-align y vertical-align son propiedades CSS. En JavaScript, rows es una propiedad DOM del grupo, no un atributo HTML para escribir en la etiqueta.

Evita los antiguos align, valign y bgcolor: usa CSS. No dupliques <thead> para introducir separadores entre cursos; los datos se organizan en <tbody>. No escribas <thead><th>…</th></thead>: falta la fila <tr>. Tampoco supongas que <thead><tr><td>Curso</td></tr></thead> crea un encabezado de columna.

¿Thead es obligatorio? No en toda tabla. Una tabla sencilla puede tener encabezados <th> sin este grupo; úsalo cuando exista una cabecera de columnas que quieras separar de los datos. ¿Thead y th son lo mismo? No: el primero reúne filas y el segundo define una celda de encabezado.

Compatibilidad y etiquetas relacionadas

<thead> tiene soporte amplio en los navegadores actuales, según MDN y su información de compatibilidad, consultada el 4 de octubre de 2026. El soporte del elemento no garantiza idéntica impresión ni lectura con tecnologías de asistencia.

La guía de <table> explica la estructura completa; <tr> crea cada fila. Usa <tbody> para grupos de datos y <tfoot> para resúmenes o totales. Una cabecera de página corresponde a <header>, y el título de la tabla a <caption>: ninguno reemplaza el grupo de filas de <thead>.