Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a HTML: el elemento COLGROUP

Datos de búsqueda

HTML: el elemento COLGROUP

El elemento COLGROUP tiene como objetivo crear grupos de columnas dentro de una tabla y hacer que todas las columnas que agrupe compartan los atributos definidos en este elemento.

En primer lugar veamos donde se coloca el elemento COLGROUP dentro de la tabla:

<table>
 <colgroup>
  ...
 </colgroup>
 <thead>
  ...
 </thead>
 <tbody>
  ...
 </tbody>
</table>

Como puede observarse se debe colocar tras la etiqueta de apertura del elemento TABLE.

Es en el propio elemento COLGROUP donde se define el número de columnas mediante el atributo span. En el siguiente ejemplo se puede observar un grupo de columnas compuesto por 10 columnas:

<colgroup span="10"></colgroup>

En el siguiente ejemplo hay 4 columnas, todas con la misma anchura:

<colgroup>
 <col width="25%">
 <col width="25%">
 <col width="25%">
 <col width="25%">
</colgroup>

Puesto que todas tienen la misma anchura sería mejor definir el atributo de anchura (width) en el elemento COLGROUP en lugar de hacerlo en COL, añadiendo además el atributo span para especificar la cantidad de columnas:

<colgroup span="4" width="25%"></colgroup>

Otro ejemplo:

<colgroup>
 <col width="20%">
 <col width="20%">
 <col width="25%">
 <col width="35%">
</colgroup>

En este caso la solución adecuada sería la separación en dos grupos:

<colgroup span="2" width="20%"></colgroup>
<colgroup>
 <col width="25%">
 <col width="35%">
</colgroup>

Enlaces relacionados

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “HTML: el elemento COLGROUP”

Alexis Advance dice:

Fecha de comentario: 2011/08/31 20:11

Me ha servido bastante este artículo. Trata un tema que en pocos artículos se ve. ¡Muchas gracias!

Información del sitio