Tablas HTML: Cómo Crearlas Correctamente (Con Ejemplos)

La práctica muestra que la mayoría de los desarrolladores escriben las tablas HTML incorrectamente; solo usan etiquetas de fila y celda ( <tr> , <td>).

En este artículo, aprenderás cómo diseñar tablas teniendo en cuenta no solo la sintaxis, sino también la semántica, es decir, designar las partes necesarias de la tabla con etiquetas que reflejen su contenido.

Introducción al Diseño Semántico

El enfoque semántico del diseño implica el uso de etiquetas HTML de acuerdo con su semántica (propósito), y su esencia radica en la elección correcta de las etiquetas y su posición relativa.

El enfoque semántico es lo opuesto al enfoque visual, en el que solo es importante cómo se ve la página HTML.

Por qué la semántica es tan importante

Mejora la accesibilidad del contenido. Entonces se entiende mejor:

• robots de búsqueda (cuanto más comprensible sea para ellos el contenido del sitio, más correctamente se presentará en los resultados de búsqueda y más fácil será para los usuarios encontrarlo);
• navegadores y asistentes para usuarios con discapacidad (por ejemplo, programas que leen información de la pantalla – lectores de pantalla).

El contenido etiquetado semánticamente puede verse exactamente igual que el diseño sin tener en cuenta la semántica. Esto se aplica a cualquier elemento en una página HTML.

Entonces, puedes usar la etiqueta <div> para todos ellos , pero no tiene semántica, no indica el significado de su contenido de ninguna manera. Por lo tanto, usamos etiquetas H1 … H6 para encabezados, y etiquetas <table> , <caption> , <thead> , <tbody> , <tfoot> , <th> para tablas . Etcétera.

Considera qué etiquetas son responsables del diseño de las tablas, cuándo y por qué se necesita cada una.

Filas y Celdas de la Tabla

Cada tabla consta de filas y celdas, y está especificada por la etiqueta <table>; este es el contenedor para el resto de las etiquetas de la tabla.

La etiqueta <tr> (table row) forma un contenedor para crear una fila de tabla. Cada celda de dicha fila se establece con una etiqueta <td> (table data) (aunque la primera celda también se puede establecer con una etiqueta <th>).

Vemos tres líneas (elementos <tr>). Cada fila tiene tres celdas (<td>). Representemos esto en código HTML:

<table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
 </table>

Combinar Celdas: colspan y rowspan

Las celdas pueden combinarse (estirarse horizontal y verticalmente) utilizando atributos especiales. Las celdas que se van a combinar no tienen que estar etiquetadas con sus propias etiquetas.

Las columnas de la tabla se unen con el atributo colspan, mientras que las filas se unen con el atributo rowspan.

Y aquí es importante no confundirse:

• El atributo colspan de las etiquetas <td> y <th> une celdas horizontalmente (es decir, celdas de la misma fila). El valor de colspan indica cuántas columnas cruza la celda.
• El atributo rowspan de las etiquetas <td> y <th> combina celdas verticalmente (es decir, celdas de diferentes filas). El valor de rowspan especifica cuántas filas atraviesa una celda.

Veamos un par de ejemplos:

La segunda celda de la primera fila interseca las dos columnas. Es decir, se estiró horizontalmente y ocupó la tercera celda de la primera fila. La tercera celda de la segunda fila interseca las dos filas, es decir, se estiró verticalmente, tomando también la tercera celda de la tercera fila.

Por lo tanto, las terceras celdas de la primera y la tercera fila no necesitan fijarse. Ya están absorbidas por las otras. Ahora pasemos al código:

  <table>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
 </table>

Otro ejemplo:

¿Cómo se explica el código HTML de esta tabla?

 <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td colspan="2" rowspan="2">2</td>
        </tr>
        <tr>
            <td>1</td>
        </tr>
 </table>

Aquí la segunda celda de la segunda fila ocupa dos columnas y dos filas. Observa que no hay tercera celda en la segunda fila ni segunda y tercera celdas en la tercera fila. La segunda celda de la segunda fila ocupa ahora los lugares de estas celdas.

Título de la Tabla <caption>

Esta etiqueta debe incluirse en cualquier tabla. Donde sea que lo coloques, su contenido aparecerá delante de la tabla. Puedes cambiar esto con la propiedad caption-side (el valor superior top es para mostrar antes de la tabla y el valor bottom es para mostrar después).

Por coherencia y accesibilidad, la etiqueta de título se coloca al principio, justo después de la etiqueta <table>.

Aquí tienes un ejemplo:

<table>
  <caption style="text-align: center;">Tasas de crecimiento anual</caption>
  <tr>
    <th>Año</th>
    <th>Tasa de crecimiento</th>
  </tr>
  <tr>
    <td>2020</td>
    <td>3%</td>
  </tr>
  <tr>
    <td>2021</td>
    <td>4%</td>
  </tr>
</table>

No te preocupes que veremos el <th> a continuación. Pero, ¿por qué necesito un título o descripción de tabla?

• Para facilitar a los usuarios la navegación por la página, por ejemplo, cuando hay muchas mesas.
• La etiqueta <caption> ayuda a las personas con discapacidades. A partir del título, obtienen una breve idea del contenido de la tabla y deciden si les resulta útil y si merece la pena leer toda la tabla.
• Esta etiqueta afecta la optimización, a los motores de búsqueda les encanta.

Estructura de una Tabla HTML

La estructura de las tablas es muy similar a la estructura de una página HTML. Solo para la página, usamos las etiquetas <header> , <main> y  <footer> , y para la tabla, usamos las etiquetas <thead> , <tbody> y  <tfoot>.

Estos elementos son útiles no solo para la accesibilidad, sino también para el estilo (como puntos lógicos para agregar CSS a una tabla).

Encabezado de tabla <thead>

Esta etiqueta define la sección de encabezado de la tabla. La mayoría de las veces, estamos hablando de la primera línea, que contiene los encabezados de las columnas.

En  las celdas <thead> usa la etiqueta <th>. El navegador centra el contenido de la celda th y el texto también se muestra en negrita.

Por ejemplo:

<table>
        <caption>Descripción</caption>
        <thead>
            <tr>
                <th>th</th>
                <th colspan="4">th</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
            </tr>
            <tr>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
            </tr>        
        </tbody>
    </table>

En el ejemplo, puedes ver que la primera línea concatena dos celdas <th>. La primera celda de la primera fila es el encabezado de las demás celdas de la primera columna, y la segunda celda de la primera fila es el encabezado de las cuatro columnas restantes.

Encabezados de columnas y filas: Etiqueta <th>

La etiqueta <th> define celdas especiales donde comienzan las filas o columnas. Dicha celda generalmente almacena un atributo para todos los datos en una fila o columna.

Como dijimos anteriormente, se aplica cierto estilo al contenido de dichas celdas: por defecto, se resalta en negrita y se centra en la celda.

Las celdas de encabezado hacen que una tabla se vea mejor y facilitan la búsqueda de datos.

La etiqueta <th> tiene otro beneficio: junto con el atributo scope , asocia cada encabezado con todos los datos de la fila o columna. Es decir, se suma a la relación intuitiva y visualmente legible que entienden los programas.

Volveremos a la etiqueta <th> y al atributo scope hacia el final del artículo, donde hablaremos con más detalle sobre la accesibilidad de las tablas para usuarios con discapacidades.

Cuerpo de tabla <tbody>

La sección <tbody> contiene el cuerpo principal de información y agrupa las partes principales de la tabla. Es decir, puedes usar <tbody> tantas veces como desees para dividir el contenido principal de la tabla en partes, cuyos datos están conectados por una lógica común.

El cuerpo de la tabla se coloca después de <caption> y <thead> .

Ejemplo:

Aquí no hay un título <caption>, por lo que debemos inventarlo y ocultarlo con CSS (para la accesibilidad del contenido web).

Los datos de la parte principal de la tabla deben agruparse por significado. Tenemos enero primero, luego febrero. Entonces, para los datos de cada mes, es lógico usar tu propio <tbody>:

• el primer <tbody> contendrá líneas de enero;
• en el segundo <tbody>, contendrá líneas de febrero.

Pie de página de tabla <tfoot>

La sección <tfoot> se utiliza para agrupar el contenido en la parte inferior de la tabla.

Semánticamente, este es el total de la tabla (por ejemplo, el resultado de calcular las sumas de las columnas).

También es un pie de tabla, el navegador lo muestra después de <tbody> , y al imprimir una tabla, el contenido de <tfoot> puede estar en cada página impresa, o solo en la última (dependiendo del navegador).

Las celdas en la sección <tfoot> deben usar la etiqueta <td>.

Ejemplo:

<table>
        <caption>Tabla de Números</caption>
        <thead>
            <tr>
                <th>Impares</th>
                <th>Pares</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                   Has aprendido lo que son los números pares e impares
                </td>
            </tr>
        </tfoot>
    </table>

La última línea de nuestro ejemplo es el total de la tabla. Por lo tanto, es bastante apropiado envolverlo con una etiqueta <tfoot>, convirtiéndolo en un pie de página.

Importante Recordar

Las etiquetas <thead> y  <tfoot> no siempre son necesarias. Algunas tablas no tienen encabezado ni pie de página.

Ejemplo:

La tabla anterior tiene seis filas, cada una con tres celdas. No hay signos importantes para el significado por el cual se pueden agrupar los contenidos de la tabla. Por lo tanto, la etiqueta <caption> (la inventaremos y la ocultaremos) y la etiqueta <tbody> serán suficientes , pero las etiquetas <thead> y <tfoot> se pueden omitir.

Etiquetas <col> y <colgroup>

Usando la etiqueta <col>, es conveniente diseñar las columnas de la tabla usando CSS (no es necesario escribir clases para cada celda en diferentes filas). Esta es una característica genial para cualquier desarrollador.

  <table class="table">
        <caption>Caption</caption>
 
        <col class="col-first">
        <col>
        <col>
 
        <thead>
            <tr>
                <th>th</th>
                <th colspan="2">th</th>
            </tr>
        </thead>
        
        <tbody>
  
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

Tenemos tres celdas y por lo tanto tres columnas. Por lo tanto, usamos tres etiquetas <col> .

La etiqueta <colgroup> se usa para agrupar etiquetas <col>:

<colgroup>
        <col class="col-first">
        <col>
        <col>
</colgroup>

<colgroup> te permite establecer el estilo para un grupo de columnas a la vez, y la etiqueta <col> dentro de <colgroup> te permite anularlo para columnas individuales en el grupo.

Atributo span

La etiqueta <col> tiene un atributo span que abarca el estilo en varias columnas.

Por ejemplo:

Por ejemplo:

<table class="table">
        <caption>Caption/Descripción</caption>
 
        <colgroup>
            <col>
            <col span="2" class="col-second">
            <col>
        </colgroup>
 
        <thead>
            <tr>
                <th>th</th>
                <th>th</th>
                <th>th</th>
                <th>th</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>

La primera etiqueta <col> es la primera columna y la segunda etiqueta <col> es la segunda, pero debido al atributo span que establecemos en “2” , su estilo se extiende a la tercera.

Esto es útil cuando desea diseñar varias columnas de la misma manera. Por ejemplo, para evitar crear muchas etiquetas <col> con las mismas clases, usamos el atributo span. Este atributo también funciona para la etiqueta <colgroup>.

El Atributo scope de la Etiqueta <th>

Cuando una tabla está bien estructurada, una mirada superficial es suficiente para comprender qué datos están dónde: inmediatamente surgen asociaciones visuales entre la información principal de la tabla y los encabezados de sus columnas y/o filas.

Pero, ¿qué pasa si nuestros usuarios no pueden dibujar ese paralelo visual? Por ejemplo, tienen problemas de visión. ¿Cómo pueden leer una tabla compleja?

Las personas con discapacidad visual suelen utilizar lectores de pantalla, programas que leen páginas web por ellos. El lector de pantalla maneja bien el texto sin formato, pero interpretar una tabla compleja es un problema para él.

Por lo tanto, los desarrolladores deben ocuparse de esto y complementar las asociaciones visuales en la tabla con otras programáticas que el lector de pantalla pueda entender.

Esto se suele hacer con la etiqueta <th> y el atributo scope , que le dice al lector de pantalla qué celdas son exactamente encabezados, por ejemplo, el encabezado de la fila donde se encuentra el programa o el encabezado de la columna.

Gracias a ellos, todos los usuarios pueden interpretar la tabla de la misma forma.

Ejemplo HTML:

Volvamos a nuestra tabla de números:

Para especificar sin ambigüedades los encabezados de las columnas, hacemos lo siguiente: