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.

Nota

Las etiquetas semánticas transmiten el significado (o la importancia) del contenido que contienen.

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.

Nota

Las hojas de estilo en cascada (CSS) se utilizan para diseñar páginas para el diseño semántico.

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>).

Es importante entender

Solo las celdas (y una celda <th> de encabezado) pueden ser elementos secundarios de una fila . Y la fila <tr> en sí misma no puede ser un elemento secundario de una celda. Esto limita la posible anidación de etiquetas.
Filas y Celdas en una Tabla HTML
Filas y Celdas en una Tabla HTML

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

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:

12
123
12

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:

HTML
  <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:

123
12
1

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

HTML
 <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>.

Nota

La etiqueta <caption> tiene por defecto el contenido centrado. Para ajustar la alineación a la izquierda o a la derecha, basta con cambiar el valor de la propiedad text-align.

Aquí tienes un ejemplo:

HTML
<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>
Tasas de crecimiento anual
Año Tasa de crecimiento
2020 3%
2021 4%

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.

Tip a seguir

Si el diseñador no proporcionó un título de tabla, un buen desarrollador creará uno, lo agregará al marcado y lo ocultará con CSS. Esto aumentará la accesibilidad del contenido. Incluso el título oculto todavía está disponible al navegar por la página usando el teclado. Y el navegador de voz para personas con discapacidades también comprende la etiqueta <caption>: al leer el texto en esta etiqueta, cambia la entonación, la velocidad del habla, aumenta el volumen de la voz y cosas por el estilo.

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>.

Nota

Según el estándar HTML5, una tabla sólo puede tener una sección thead y una tfoot, pero un tbody puede tener varias.

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.

Nota

El navegador y los motores de búsqueda tratan esta parte como el encabezado de la tabla. Por ejemplo, al imprimir, los encabezados y pies de página de la tabla estarán en cada página impresa, y gracias a dicho encabezado, no olvidará lo que significan los datos en cada columna.

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:

Descripción
th th
td td td td td
td td td td td
HTML
<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.

Importante

No uses para el formato visual, solo para resaltar la celda del encabezado. Este principio se aplica a todos los elementos de marcado que tienen semántica.

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.

Importante

La etiqueta <tbody> es semánticamente importante: el navegador, los rastreadores y los ayudantes para personas con discapacidades entienden dónde se encuentra el contenido principal de la tabla.

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

Ejemplo:

MesDías de la semanaPago (dólares)
EneroLunes50
Martes40
Miércoles35
Jueves40
Viernes15
Sábado60
Domingo30
FebreroLunes20
Martes25
Miércoles15
Jueves70
Viernes77
Sábado63
Domingo30

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).

Importante

Para evitar problemas de accesibilidad (navegación por teclado y accesibilidad), el <tfoot> debe colocarse después del <tbody>.

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

Ejemplo:

Tabla de Números
Impares Pares
1 2
3 4
5 6
Has aprendido lo que son los números pares e impares
HTML
<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.

Importante

Si no tiene sentido agrupar la parte principal de la tabla, también puedes prescindir de la etiqueta <tbody> , pero te recomendamos que no lo hagas. La etiqueta te brinda más control sobre la estructura y el estilo de la tabla, y te enseña a actuar de manera consistente. Además, el navegador seguirá sustituyendo esta etiqueta por sí mismo, y confiar siempre en los navegadores significa dejar espacio para posibles errores.

Ejemplo:

1García H. C.10/09/1992
2Rodríguez M. A.02/05/1996
3López G. R.09/10/1990
4Martínez L. A.25/03/1993
5Hernández S. J.15/10/1994
6González C. E.10/10/1991

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.

Caption/Descripción
th th
1 2 3
1 2 3
1 2 3
HTML
  <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.

Importante

Debes colocar las etiquetas <colgroup> , <col> antes de las etiquetas <thead>, <tbody> , <tfoot>, y si la tabla tiene una etiqueta <caption>, después de ella.

Atributo span

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

Por ejemplo:

Por ejemplo:

Caption/Descripción
th th th th
1 2 3 4
HTML
<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:

Tabla de Números
Impares Pares
1 2
3 4
5 6
Has aprendido lo que son los números pares e impares

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

HTML
Compartir Artículo: