Hoy vamos a hablar de la etiqueta Colgroup en HTML, una etiqueta que a veces no se tiene muy en cuenta pero que nos puede ser de mucha utilidad si estamos trabajando con tablas.
Así que, a continuación, veremos para qué sirve exactamente esta etiqueta y cómo se utiliza a través de un ejemplo muy sencillo.
Y por cierto, recuerda que esta lección forma parte del diccionario HTML que estamos viendo en el blog, y esto lleva un curro de la leche.
Así que agradezco que te pases por la sección de comentarios a comentar alguna cosita aunque sea 👌
¡Y ahora vamos allá!
¿Qué es la Etiqueta colgroup y para qué sirve?
Lo primero, ¿qué es la etiqueta <colgroup> y para qué sirve? Esta vez el nombre de la etiqueta sí que nos da una pista de su uso.
Pero bueno, si no lo has adivinado ya, no te preocupes. La etiqueta <colgroup> se utiliza para especificar un grupo de columnas en una tabla con el propósito de aplicar estilos.
Además, puedes utilizar la etiqueta <col> dentro de la etiqueta <colgroup> para hacer referencia a columnas individuales.
Por cierto, no sé si te acuerdas, pero la etiqueta <col> es la etiqueta que vimos en el anterior lección, donde aprendimos cómo se utilizaba este elemento.
Pero bueno, si suena un poco técnico, no te preocupes, porque ahora vamos a ver un ejemplo en el editor de código.
Ejemplo de cómo se usa Colgroup
Fijaros lo que hemos hecho en este ejemplo, que consta de la típica estructura HTML y dentro del body tenemos una tabla con la etiqueta <colgroup>.
Dentro de la etiqueta <colgroup> tenemos las etiquetas <col> que indican cada una de las columnas que queramos.
Si os fijáis aquí, simplemente lo que está haciendo es juntando todas las etiquetas <col> que queramos, o sea, agrupa el conjunto de columnas que queramos.
<table>
<colgroup>
<col span="2" style="background-color:#FFC45D">
<col style="background-color:#4169e1">
</colgroup>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>Si por ejemplo nosotros queremos pintar las dos primeras columnas de este color amarillo, simplemente le tendríamos que pasar esta etiqueta <col> y luego tendríamos que pasar el atributo span y seleccionar las columnas que queramos.
Lo he maquetado un poquito con estilos CSS para que no quede tan cutre. Y si os fijáis, aquí tenemos el primer conjunto de columnas y después el tercero.
En este caso, como le hemos dicho que hiciera referencia a dos columnas con el span, se pintan dos columnas del color que le hemos indicado, y lo mismo pasa con la tercera.
Conclusión
Como has visto, pues simplemente se trata de una etiqueta para agrupar las columnas que queramos de nuestra tabla y así poder personalizarla de forma más fácil.
Espero que te haya resultado útil esta lección y recuerda que si tienes cualquier pregunta o cualquier sugerencia puedes dejarla en los comentarios.
¡Nos vemos, adiós!