Organización de tablas HTML

Etiquetas semánticas para organizar partes de la tabla


Por defecto, al crear una tabla, el navegador se encarga de irla creando a medida que va leyendo las etiquetas, por lo que la tabla se crea en el orden que se han especificado sus elementos, desde arriba hacia abajo.

Sin embargo, podemos utilizar una serie de etiquetas contenedoras semánticas para tablas que nos permitirán incluso establecer la zona de la tabla donde deben aparecer, de forma que el navegador se encarga de reorganizarla a la hora de renderizar.

Estas etiquetas semánticas son las siguientes:

Etiqueta Descripción
<thead> Etiqueta contenedora de la cabecera de la tabla. Generalmente, parte superior.
<tbody> Etiqueta contenedora del cuerpo de la tabla. Generalmente, parte central.
<tfoot> Etiqueta contenedora del pie de la tabla. Generalmente, parte inferior.
<caption> Establece un título de la tabla, independientemente de su posición.

Supongamos la siguiente tabla:

<table>
  <tr>
    <th rowspan="2">Estudiante</th>
    <th colspan="3">Calificación</th>
  </tr>
  <tr>
    <th>1º ev.</th>
    <th>2º ev.</th>
    <th>3º ev.</th>
  </tr>
  <tr>
    <td>Bernardo</td>
    <td>5.7</td>
    <td>8.3</td>
    <td>8.9</td>
  </tr>
  <tr>
    <td>Remigio</td>
    <td>4.7</td>
    <td>4.7</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td>9.7</td>
    <td>9.7</td>
    <td>9.9</td>
  </tr>
  <!-- ... -->
</table>
th, td {
  border: 1px solid #000;
}

A estas etiquetas de tabla y atributos que ya hemos visto en artículos anteriores, podemos añadir las mencionadas nuevas etiquetas, definiendo así la zona donde aparecerán las diferentes partes de la tabla, aunque no tengan el orden correcto.

La etiqueta <caption>

La etiqueta <caption> debe aparecer en el interior de la tabla <table> y como primer elemento inmediato. En su interior, se establece una leyenda que hará referencia a la tabla, donde podemos describirla o dar contexto sobre los datos que contiene.

Si visualmente queremos que el <caption> aparezca en otra parte, podemos utilizar una propiedad CSS para ello:

table {
  caption-side: bottom;
}

Por defecto, esta propiedad caption-side viene establecida a top, pero podemos darle valor bottom para colocar abajo la leyenda.

Agrupaciones de partes de la tabla

Las etiquetas <thead>, <tbody> y <tfoot> son las etiquetas semánticas de agrupación de las tablas. Con ellas podemos definir mediante estas etiquetas "invisibles", la zona donde queremos que aparezca cada parte de la tabla.

Por ejemplo, observa que en el siguiente fragmento de código, se ha colocado intencionadamente la etiqueta <tfoot> al principio de la tabla, antes de <tbody> y <tfoot>. Aunque lo normal no es hacer esto, comprobarás que aunque el footer esté en primer lugar, en la tabla será renderizado al final.

Veamos el fragmento de código:

<table>
  <caption>Calificaciones de los alumnos</caption>
  <tfoot>
    <tr>
      <td>Ref.</td>
      <td>5.0</td>
      <td>5.0</td>
      <td>5.0</td>
    </tr>
  </tfoot>
  <thead>
    <tr>
      <th rowspan="2">Estudiante</th>
      <th colspan="3">Calificación</th>
    </tr>
    <tr>
      <th>1º ev.</th>
      <th>2º ev.</th>
      <th>3º ev.</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Bernardo</td>
    <td>5.7</td>
    <td>8.3</td>
    <td>8.9</td>
  </tr>
  <tr>
    <td>Remigio</td>
    <td>4.7</td>
    <td>4.7</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td>9.7</td>
    <td>9.7</td>
    <td>9.9</td>
  </tr>
  </tbody>
  <!-- ... -->
</table>
th, td {
  border: 1px solid #888;
}

tfoot td {
  background: #666;
  color: #eee;
  border: 0;
}

Esto nos puede servir para crear tablas de forma más precisa sin tener que mantener una estructura lógica y realista (aunque siempre se recomienda hacerlo). En algunos lenguajes de programación puedes necesitar construir la tabla de forma dinámica a medida que se procesan ciertos detalles, por lo que esto podría ser bastante útil e interesante.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev