Los HTML Table Headers, es decir, los encabezados de tabla en HTML, ayudan a estructurar mejor tus tablas. En HTML, la etiqueta <th> sirve para destacar visual y semánticamente las columnas o filas que se precisen, y, además, es relevante tanto para los usuarios, los motores de búsqueda, así como para los lectores de pantalla.

¿Qué es <th> en HTML (Table Headers)?

En HTML, la etiqueta <th> (Table Header) se utiliza para definir celdas de cabecera en tablas HTML. Estas celdas formateadas con dicha etiqueta actúan como encabezados de las columnas o filas correspondientes de la tabla y, por lo general, suelen aparecer en negrita y centradas. Si es necesario, su apariencia puede ajustarse mediante CSS. Los encabezados de tabla en HTML deben usarse dentro de una etiqueta <tr> en HTML (Table Row), aunque su posición en la tabla no es estricta. Sin embargo, es habitual encontrarlas en el encabezado o en la primera columna de la tabla.

Web Hosting
El hosting que crece con tu proyecto
  • Tiempo de actividad de 99.99 % y seguridad garantizada
  • Aumenta el rendimiento según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

¿Por qué son útiles los encabezados de tabla en HTML?

Los encabezados de tabla en HTML ayudan a estructurar tus tablas y a describir su contenido. Su uso es útil y recomendable por varias razones:

  • Organización de datos: los encabezados con la etiqueta <th> en HTML ayudan a presentar los datos de la tabla de manera clara y organizada. Proporcionan una descripción a las columnas o filas para indicar qué tipo de datos contienen.
  • Mejora de la legibilidad: en HTML, <th> facilita a los usuarios la comprensión de los datos presentados. Los encabezados destacados visualmente dividen claramente las distintas categorías o grupos de datos, facilitando así la búsqueda de información específica.
  • Accesibilidad: los encabezados de tabla en HTML son especialmente importantes para la accesibilidad. Los lectores de pantalla utilizan los elementos <th> para explicar la estructura y el contexto de la tabla. Con atributos adicionales, como scope o headers, puedes especificar aún mejor qué datos corresponden a cada encabezado.
Consejo

Los encabezados son solo una de las muchas opciones para diseñar tablas en HTML. En nuestro artículo específico sobre el estilo de tablas HTML, explicamos en detalle cómo ajustar visualmente textos y celdas.

La sintaxis de la etiqueta <th> en HTML (con una tabla de ejemplo)

Para definir un encabezado de tabla con la etiqueta <th> en HTML, solo necesitas una etiqueta de apertura <th> y una etiqueta de cierre </th>. Entre ambas etiquetas se coloca el texto deseado del encabezado. De forma opcional, es posible añadir atributos a la etiqueta de apertura para controlar el comportamiento y la apariencia del elemento <th>. La sintaxis básica (con marcadores de posición para los atributos) es la siguiente:

<th atributo1="" atributo2="" …>Encabezado</th>
html

Entre los atributos más importantes para los encabezados de tabla en HTML se encuentran los siguientes:

  • scope: indica si la celda de cabecera se refiere a una columna (col) o a una fila (row)
  • colspan: define el número de columnas que abarca la celda de cabecera
  • rowspan: define el número de filas que abarca la celda de cabecera
  • class: permite especificar nombres de clase CSS para definir el estilo
  • style: sirve para agregar CSS en línea y personalizar la celda de cabecera

Para ilustrar la sintaxis de <th> en HTML, a continuación, se muestra un ejemplo sencillo: en la tabla se presentan las categorías y precios de tres productos diferentes (“manzana”, “pan” y “zumo”). Tanto el encabezado como la primera columna están definidas como cabeceras con la etiqueta <th> en HTML. Con el atributo scope se especifica si cada celda de cabecera corresponde a una fila o columna:

<html>
<table>
    <tr>
        <th scope="col">Producto</th>
        <th scope="col">Categoría</th>
        <th scope="col">Precio</th>
    </tr>
    <tr>
        <th scope="row">Manzana</th>
        <td>Fruta</td>
        <td>$1.50</td>
    </tr>
    <tr>
        <th scope="row">Pan</th>
        <td>Panadería</td>
        <td>$2.00</td>
    </tr>
    <tr>
        <th scope="row">Zumo</th>
        <td>Bebidas</td>
        <td>$1.00</td>
    </tr>
</table>
</body>
</html>
html

En la página web, la tabla se vería de la siguiente forma:

Imagen: Ejemplo de encabezados de tabla en HTML
Ejemplo simple de una tabla HTML con encabezados (sin instrucciones CSS)

Combinación con la etiqueta <caption>

También puedes agregar un encabezado a toda la tabla en HTML, que se muestre antes de la tabla. Para ello, basta con insertar un elemento <caption> (con etiqueta de apertura y cierre) justo a continuación de iniciar la tabla con <table>. La apariencia y la posición de este encabezado se pueden ajustar con CSS, por lo que también es posible colocar el texto debajo de la tabla.

Si añadimos un encabezado <caption> con el texto “Tabla de ejemplo de productos y precios” a nuestro ejemplo anterior, el código quedaría así:

<html>
<table>
<caption>Tabla de ejemplo de productos y precios</caption>
    <tr>
        <th scope="col">Producto</th>
        <th scope="col">Categoría</th>
        <th scope="col">Precio</th>
    </tr>
    <tr>
        <th scope="row">Manzana</th>
        <td>Fruta</td>
        <td>$1.50</td>
    </tr>
    <tr>
        <th scope="row">Pan</th>
        <td>Panadería</td>
        <td>$2.00</td>
    </tr>
    <tr>
        <th scope="row">Zumo</th>
        <td>Bebidas</td>
        <td>$1.00</td>
    </tr>
</table>
</body>
</html>
html

Ahora, en la página web, se vería el nuevo título en la tabla creada como ejemplo:

Imagen: Tabla HTML: ejemplo con etiqueta caption
Después de añadir la etiqueta de caption, la tabla de ejemplo muestra el encabezado deseado (sin instrucciones CSS).
Consejo

Para obtener más información sobre este lenguaje de marcado, consulta nuestro completo tutorial para principiantes en HTML.

¿Le ha resultado útil este artículo?
Ir al menú principal