Tablas en HTML

Agrupación de columnas

Las columnas de una tabla que están de alguna manera relacionadas pueden ser agrupadas con el elemento colgroup. Es importante que los grupos de columnas tengan un significado semántico y que no se limiten a formar bloques estilísticos. Por ejemplo, el elemento colgroup se puede utilizar para agrupar columnas si se refieren a un mismo producto o si representan una misma magnitud, pero no debe ser usado simplemente para hacer que tengan el mismo aspecto (para eso está el elemento col).

El elemento colgroup, solo o conformando un bloque, debe ser declarado al comienzo de la tabla, luego de su etiqueta de apertura y de su título (caption), si éste está presente. Cada elemento colgroup declarado en este bloque definirá un grupo con la ayuda del atributo span, el cual indicará el número de columnas que pertenecerán a este grupo.

La grupos de columnas se declaran de izquierda a derecha, de modo que el primer grupo contendrá a la primera columna de la tabla más un número de de columnas consecutivas según lo defina su atributo span. El resto de los grupos comenzarán por la primera columna a la derecha del grupo anterior. Este concepto puede resultar algo complicado, así que veamos un ejemplo.

La siguiente tabla tiene cinco columnas: la primera con celdas de encabezados, las dos siguientes con el desempeño de Mike y las dos últimas con el desempeño de Tara. Los elementos colgroup declarados al comienzo reflejan la misa estructura recién explicada: un colgroup para los encabezados, uno para el desempeño de Mike y otro para el desempeño de Tara. Fíjate como el atributo span indica el número de columnas que abraca cada grupo, con excepción del primero que tiene sólo una columna (el valor por defecto de span). Sólo para hacerlos visibles, agregamos algunos atributos de estilo a los grupos de columnas.

Un par de cosas a considerar en el ejemplo siguiente: primero, que el valor por defecto del atributo span es 1, motivo por el cual no lo especificamos en el primer grupo; y segundo, el tag de cierre es opcional para el elemento colgroup.

<table class="default">
  <colgroup>
  <colgroup span="2" style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);">
  <colgroup span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
  <tr>
    <th></th>
    <th colspan="2">Mike</th>
    <th colspan="2">Tara</th>
  </tr>
  <tr>
    <th></th>
    <th>Primera prueba</th>
    <th>Segunda prueba</th>
    <th>Primera prueba</th>
    <th>Segunda prueba</th>
  </tr>
  <tr>
    <th>Día 1</th>
    <td>25 km</td>
    <td>38 km</td>
    <td>28 km</td>
    <td>37 km</td>
  </tr>
  <tr>
    <th>Día 2</th>
    <td>22 km</td>
    <td>35 km</td>
    <td>30 km</td>
    <td>35 km</td>
  </tr>
</table>
Mike Tara
Primera prueba Segunda prueba Primera prueba Segunda prueba
Día 1 25 km 38 km 28 km 37 km
Día 2 22 km 35 km 30 km 35 km

Pero span no es la única forma de indicar el número de columnas afectadas por un grupo. A veces, el elemento col puede resultar ser una mejor alternativa. Si quieres investigar más profundamente el tema échale un vistazo a la referencia para el elemento col.

Prev12345Next