Elemento colgroup

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento colgroup representa a un grupo de una o más columnas de una tabla (table). Este elemento puede también proveer atributos comunes a las columnas que representa de la misma forma en que lo hace el elemento col.

Para especificar el número de columnas consecutivas que serán agrupadas por este elemento, los autores pueden usar uno de dos métodos (pero no ambos): declarando el atributo span con el número de columas agrupadas como valor o agregando uno o más elementos col como hijos. Cualquiera sea el método elegido, el conteo de columnas va de izquierda a derecha, de modo que para tener un elemento colgroup que represente a la tercera columna de una tabla, se debe primero representar con otro elemento colgroup a las dos primeras.

Los autores pueden usar cualquiera de los dos métodos para especificar el número de columnas en el grupo (con el atributo span y con el elemento col) pero nunca ambos a la vez.

Este elemento supera en desempeño a col al proveer un significado semántico: las columnas abarcadas constituyen un grupo de columnas. Los autores deben tener esto en consideración y evitar utilizar erróneamente al elemento sólo con propósitos de presentación.

El elemento colgroup debe ser declarado al comienzo de la tabla, antes de cualquier otro elemento excepto caption (si está presente).

Ejemplos

El siguiente ejemplo muestra una tabla (table) con seis columnas, donde las tres perimeras se encuentran agrupadas con un elemento colgroup y las tres siguientes con otro. En el primer grupo, las columnas agrupadas son especificadas con el atributo span. En el segundo grupo, las columnas afectadas por el grupo pueden ser interpretadas como las columnas afectadas por los elementos col declarados como hijos, las cuales son: una columna afectada por el primer elemento col y dos más afectadas por el segundo.

<table class="egt">
  <colgroup span="3"></colgroup>
  <colgroup>
    <col>
    <col span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
  </colgroup>
  <tr>
    <th>Ciudad</th>
    <th>Lengua</th>
    <th>Moneda</th>
    <th>Área</th>
    <th>Población</th>
    <th>Densidad</th>
  </tr>
  <tr>
    <td>Londres</td>
    <td>Inglés</td>
    <td>GBP</td>
    <td>1,572.00 km<sup>2</sup></td>
    <td>8,416,535</td>
    <td>5,354/km<sup>2</sup></td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Inglés</td>
    <td>USD</td>
    <td>177.0 km<sup>2</sup></td>
    <td>646,449</td>
    <td>4,066/km<sup>2</sup></td>
  </tr>
  <tr>
    <td>Moscú</td>
    <td>Ruso</td>
    <td>RUB</td>
    <td>2,511 km<sup>2</sup></td>
    <td>11,503,501</td>
    <td>4,581.24/km<sup>2</sup></td>
  </tr>
</table>
Ciudad Lengua Moneda Área Población Densidad
Londres Inglés GBP 1,572.00 km2 8,416,535 5,354/km2
Washington Inglés USD 177.0 km2 646,449 4,066/km2
Moscú Ruso RUB 2,511 km2 11,503,501 4,581.24/km2

Nota que, a pesar del propósito de los elementos col en este ejemplo, ambos elementos colgroup indican que las columnas afectadas por ellos están siendo agrupadas.

Atributos

Atributos específicos

span

El número de columnas que abarcará el elemento (desde su posición y hacia la derecha) y que, por lo tanto, serán agrupadas y afectadas por otros atributos suyos. Cuando este atributo no está presente y el elemento no tiene elementos col como hijos, afecta una sola columna.

Los autores pueden usar cualquiera de los dos métodos para especificar el número de columnas en el grupo (con el atributo span y con el elemento col) pero nunca ambos a la vez.

Ejemplo

<colgroup span="3" style="color: rgba(255, 128, 0,0.3);">

align

La alineación horizontal del texto en todas las celdas afectadas. Existen cinco valores posibles (insensibles a mayúsculas/minúsculas):

  • left: el texto se alinea a la margen izquierda. Este es el valor predeterminado para celdas de datos (td).
  • center: el texto es centrado. Este es el valor predeterminado para celdas de encabezado (th).
  • right: el texto se alinea a la margen derecha.
  • justify: el texto es justificado o alineado a ambas márgenes.
  • char: el texto se alinea a un carácter específico. Se utiliza en conjunto con el atributo char.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<colgroup span="2" align="center">

char

Un carácter que actuará como eje para la alineación del texto. Está pensado para trabajar junto con el atributo align cuando presenta el valor "char". En otras situaciones será completamente ignorado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso es consecuentemente inválido. Se aconseja a los autores reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<colgroup align="char" char="c">

charoff

Un desplazamiento, desde la primera aparición del carácter de alineación (especificado en el atributo char) y en la dirección del texto. El carácter resultante de este cálculo será el eje para la alineación del texto.

Para que este atributo sea considerado, el valor del atributo align debe ser "char" y el atributo char debe estar presente.

Este atributo es considerado obsoleto por HTML5 y su uso ya no es recomendado. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<colgroup align="char" char="t" charoff="7">

valign

La alineación vertical del texto en todas las celdas afectadas. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):

  • top: el texto se alinea a la margen superior.
  • middle: el texto es centrado verticalmente.
  • bottom: el texto se alinea a la margen inferior.
  • baseline: todas las celdas en una fila con esta misma alineación deberían tener su primera línea de texto en una línea base común.

Este atributo es obsoleto de acuerdo con el estándar HTML5 y, por lo tanto, inválido. Se aconseja a los autores evitar su uso y reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<colgroup valign="top">

width

Un ancho para cada una de las columnas afectadas. Puede ser especificado en un número de píxeles, como un porcentaje o como un valor que representa una porción del espacio disponible.

Este atributo se ha vuelto obsoleto de acuerdo al estándar HTML5 y, por lo tanto, su uso ya no es válido. Se alienta a los autores a abandonar su uso en favor de las hojas de estilo.

Ejemplo

<colgroup width="250">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.