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>