La Etiqueta TH

Se utiliza para definir celdas de encabezado en una tabla, proporcionando contexto semántico a los datos de las columnas o filas.

La etiqueta <th> en HTML se utiliza para definir celdas de encabezado en una tabla, proporcionando contexto semántico a los datos de las columnas o filas. A diferencia de <td> (celda de datos), <th> indica títulos o categorías clave, mejorando la accesibilidad y organización de la información. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La etiqueta <th> se coloca dentro de una fila (<tr>) y generalmente dentro de <thead> para encabezados de tabla:

<table>
  <thead>
    <tr>
      <th>Nombre</th>  <!-- Encabezado de columna -->
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Resultado:

Nombre Edad
Ana 25

Atributos clave

Atributo Descripción
scope Indica si el encabezado aplica a una columna (col), fila (row), o grupo.
colspan Combina celdas horizontalmente (ejemplo: <th colspan="2">).
rowspan Combina celdas verticalmente (ejemplo: <th rowspan="2">).
headers Vincula la celda con encabezados específicos (para tablas complejas).

Casos de uso

a) Encabezados de columna

<table>
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$800</td>
    </tr>
  </tbody>
</table>

b) Encabezados de fila

<table>
  <tr>
    <th scope="row">Nombre:</th>
    <td>Carlos</td>
  </tr>
  <tr>
    <th scope="row">Edad:</th>
    <td>30</td>
  </tr>
</table>

Resultado:

Nombre: Carlos
Edad: 30

Combinar celdas

a) colspan para encabezados amplios

<table>
  <thead>
    <tr>
      <th colspan="2">Información del Usuario</th>
    </tr>
    <tr>
      <th>Nombre</th>
      <th>Email</th>
    </tr>
  </thead>
</table>

Resultado:

Información del Usuario
Nombre Email

Accesibilidad

Atributo scope:
Indica si el encabezado corresponde a una columna (scope="col") o fila (scope="row").

<th scope="col">País</th>  <!-- Encabezado de columna -->
<th scope="row">Población</th>  <!-- Encabezado de fila -->

Lectores de pantalla: Interpretan <th> para ayudar a navegar la tabla.

Personalización con CSS

Modifica el estilo de los encabezados:

th {
  background: #2ecc71;   /* Color de fondo */
  color: white;          /* Color del texto */
  padding: 12px;         /* Espaciado interno */
  border: 1px solid #27ae60; /* Borde */
  text-align: left;      /* Alineación */
}

/* Efecto hover */
th:hover {
  background: #27ae60;
}

Ejemplo:

Producto Precio
Laptop $800

Buenas prácticas

Usa <thead> para encabezados: Agrupa los <th> dentro de <thead>.

Evita <th> para datos: Solo para encabezados.

Prioriza scope: Mejora la accesibilidad en tablas complejas.

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

<table>
  <caption>Lista de empleados</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;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
    }
    th {
      background: #007bff;
      color: white;
      text-align: left;
    }
    caption {
      font-size: 1.2em;
      margin: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <caption>Reporte de Ventas 2023</caption>
    <thead>
      <tr>
        <th scope="col">Producto</th>
        <th scope="col">Cantidad</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Laptop</td>
        <td>50</td>
        <td>$40,000</td>
      </tr>
      <tr>
        <td>Teléfono</td>
        <td>100</td>
        <td>$30,000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td>150</td>
        <td>$70,000</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Resultado:

Producto Cantidad Total
Laptop 50 $40,000
Teléfono 100 $30,000
Total 150 $70,000

Errores comunes

Usar <th> como <td>:

<tr>
  <th>Ana</th> <!-- Debe ser un dato, no un encabezado -->
  <td>25</td>
</tr>

Olvidar el scope:

<th>País</th> <!-- Falta scope="col" o scope="row" -->

Conclusión

La etiqueta <th> es esencial para:

  • Definir encabezados claros en tablas.

  • Mejorar la accesibilidad para tecnologías de asistencia.

  • Organizar datos de manera semántica.

Recuerda:

  • Usa scope para indicar el alcance del encabezado.

  • Combina <th> con <thead>, <tbody>, y <tfoot> para estructuras completas.

  • Personaliza estilos con CSS para destacar visualmente los encabezados.

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