Los HTML Table Headers, es decir, los en­ca­be­za­dos de tabla en HTML, ayudan a es­tru­c­tu­rar mejor tus tablas. En HTML, la etiqueta <th> sirve para destacar visual y se­má­n­ti­ca­me­n­te 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 fo­r­ma­tea­das con dicha etiqueta actúan como en­ca­be­za­dos de las columnas o filas co­rre­s­po­n­die­n­tes de la tabla y, por lo general, suelen aparecer en negrita y centradas. Si es necesario, su apa­rie­n­cia puede ajustarse mediante CSS. Los en­ca­be­za­dos 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 en­co­n­trar­las en el en­ca­be­za­do 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 ga­ra­n­ti­za­da
  • Aumenta el re­n­di­mie­n­to según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

¿Por qué son útiles los en­ca­be­za­dos de tabla en HTML?

Los en­ca­be­za­dos de tabla en HTML ayudan a es­tru­c­tu­rar tus tablas y a describir su contenido. Su uso es útil y re­co­me­n­da­ble por varias razones:

  • Or­ga­ni­za­ción de datos: los en­ca­be­za­dos con la etiqueta <th> en HTML ayudan a presentar los datos de la tabla de manera clara y or­ga­ni­za­da. Pro­po­r­cio­nan una de­s­cri­p­ción a las columnas o filas para indicar qué tipo de datos contienen.
  • Mejora de la le­gi­bi­li­dad: en HTML, <th> facilita a los usuarios la co­m­pre­n­sión de los datos pre­se­n­ta­dos. Los en­ca­be­za­dos de­s­ta­ca­dos vi­sua­l­me­n­te dividen cla­ra­me­n­te las distintas ca­te­go­rías o grupos de datos, fa­ci­li­ta­n­do así la búsqueda de in­fo­r­ma­ción es­pe­cí­fi­ca.
  • Ac­ce­si­bi­li­dad: los en­ca­be­za­dos de tabla en HTML son es­pe­cia­l­me­n­te im­po­r­ta­n­tes para la ac­ce­si­bi­li­dad. Los lectores de pantalla utilizan los elementos <th> para explicar la es­tru­c­tu­ra y el contexto de la tabla. Con atributos adi­cio­na­les, como scope o headers, puedes es­pe­ci­fi­car aún mejor qué datos co­rre­s­po­n­den a cada en­ca­be­za­do.
Consejo

Los en­ca­be­za­dos son solo una de las muchas opciones para diseñar tablas en HTML. En nuestro artículo es­pe­cí­fi­co sobre el estilo de tablas HTML, ex­pli­ca­mos en detalle cómo ajustar vi­sua­l­me­n­te textos y celdas.

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

Para definir un en­ca­be­za­do 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 en­ca­be­za­do. De forma opcional, es posible añadir atributos a la etiqueta de apertura para controlar el co­m­po­r­ta­mie­n­to y la apa­rie­n­cia del elemento <th>. La sintaxis básica (con ma­r­ca­do­res de posición para los atributos) es la siguiente:

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

Entre los atributos más im­po­r­ta­n­tes para los en­ca­be­za­dos de tabla en HTML se en­cue­n­tran los si­guie­n­tes:

  • 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 es­pe­ci­fi­car nombres de clase CSS para definir el estilo
  • style: sirve para agregar CSS en línea y pe­r­so­na­li­zar la celda de cabecera

Para ilustrar la sintaxis de <th> en HTML, a co­n­ti­nua­ción, se muestra un ejemplo sencillo: en la tabla se presentan las ca­te­go­rías y precios de tres productos di­fe­re­n­tes (“manzana”, “pan” y “zumo”). Tanto el en­ca­be­za­do como la primera columna están definidas como cabeceras con la etiqueta <th> en HTML. Con el atributo scope se es­pe­ci­fi­ca si cada celda de cabecera co­rre­s­po­n­de 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 en­ca­be­za­dos (sin in­s­tru­c­cio­nes CSS)

Co­m­bi­na­ción con la etiqueta <caption>

También puedes agregar un en­ca­be­za­do 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 co­n­ti­nua­ción de iniciar la tabla con <table>. La apa­rie­n­cia y la posición de este en­ca­be­za­do se pueden ajustar con CSS, por lo que también es posible colocar el texto debajo de la tabla.

Si añadimos un en­ca­be­za­do <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 en­ca­be­za­do deseado (sin in­s­tru­c­cio­nes CSS).
Consejo

Para obtener más in­fo­r­ma­ción sobre este lenguaje de marcado, consulta nuestro completo tutorial para pri­n­ci­pia­n­tes en HTML.

Ir al menú principal