La Etiqueta THEAD

Se utiliza para definir el encabezado de una tabla HTML, agrupando las filas que contienen las celdas de título o categorías de las columnas.

La etiqueta <thead> (tabla header) se utiliza para definir el encabezado de una tabla HTML, agrupando las filas que contienen las celdas de título o categorías de las columnas. Es esencial para estructurar tablas de manera semántica, mejorar la accesibilidad y facilitar el estilo de los encabezados. Aquí te mostramos cómo implementarla correctamente.

¿Qué es <thead>?

  • Propósito: Agrupar las filas que contienen los encabezados de las columnas de una tabla.

  • Semántica: Ayuda a navegadores, lectores de pantalla y motores de búsqueda a entender la estructura de los datos.

  • Relación: Se usa junto con <tbody> (cuerpo) y <tfoot> (pie) para organizar la tabla.

Sintaxis básica

<table>
  <thead>
    <tr>
      <th>Producto</th> <!-- Encabezados -->
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td> <!-- Datos -->
      <td>$800</td>
    </tr>
  </tbody>
</table>

Resultado:

Producto Precio
Laptop $800

Atributos clave

Atributo Descripción
align Alineación horizontal del contenido (obsoleto en HTML5, usa CSS).
valign Alineación vertical del contenido (obsoleto en HTML5, usa CSS).
scope En <th>, indica si el encabezado aplica a una columna (col) o fila (row).

Casos de uso

a) Encabezados simples

<thead>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>País</th>
  </tr>
</thead>

b) Encabezados con colspan

<thead>
  <tr>
    <th colspan="3">Información de Usuarios</th>
  </tr>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>País</th>
  </tr>
</thead>

Resultado:

Información de Usuarios
Nombre Edad País

Accesibilidad

Atributo scope: Indica si un encabezado corresponde a una columna (col) o fila (row):

<thead>
  <tr>
    <th scope="col">Producto</th>
    <th scope="col">Precio</th>
  </tr>
</thead>

Lectores de pantalla: Reconocen <thead> para identificar encabezados y navegar la tabla.

Estilización con CSS

Personaliza los encabezados para diferenciarlos de los datos:

thead {
  background: #007bff; /* Color de fondo */
  color: white;        /* Color del texto */
}

th {
  padding: 12px;
  border-bottom: 2px solid #0056b3;
  text-align: left;
}

Ejemplo:

Producto Precio
Laptop $800

Buenas prácticas

Orden lógico: Coloca <thead> antes de <tbody> y <tfoot>.

Combínalo con <caption>: Añade un título descriptivo a la tabla:

<table>
  <caption>Lista de productos en stock</caption>
  <thead>...</thead>
</table>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    table {
      width: 80%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: Arial;
    }
    thead {
      background: #2ecc71;
      color: white;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
    }
    caption {
      font-size: 1.2em;
      margin: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <caption>Reporte de Ventas Mensuales</caption>
    <thead>
      <tr>
        <th scope="col">Mes</th>
        <th scope="col">Ventas</th>
        <th scope="col">Meta</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Enero</td>
        <td>$5,000</td>
        <td>$4,500</td>
      </tr>
      <tr>
        <td>Febrero</td>
        <td>$6,200</td>
        <td>$5,000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td>$11,200</td>
        <td>$9,500</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Resultado:

Mes Ventas Meta
Enero $5,000 $4,500
Febrero $6,200 $5,000
Total $11,200 $9,500

Errores comunes

Encabezados fuera de <thead>:

<table>
  <tr>
    <th>Producto</th> <!-- Falta <thead> -->
  </tr>
</table>

Usar <td> en lugar de <th>:

<thead>
  <tr>
    <td>Producto</td> <!-- Debe ser <th> -->
  </tr>
</thead>

Conclusión

La etiqueta <thead> es clave para:

  • Estructurar tablas de manera semántica.

  • Mejorar la accesibilidad para tecnologías de asistencia.

  • Facilitar el estilo de encabezados con CSS.

Recuerda:

  • Usa <th> para definir encabezados dentro de <thead>.

  • Combínala con <tbody> y <tfoot> para tablas completas.

  • Prioriza la claridad y la organización en tus datos.

¡Ahora puedes crear tablas profesionales y accesibles con <thead>!