En este episodio del diccionario HTML, vamos a hablar sobre la etiqueta <col>.
Sí, has oído bien, la etiqueta <col> a secas.
Esta etiqueta en HTML me recuerda un poco a Bootstrap, especialmente por el tema de las columnas.
De hecho, podríamos decir que le hace un poquito la competencia al lenguaje de CSS. En breve entenderás porque digo esto…
Antes de continuar, quiero recordarte que este post forma parte del diccionario de HTML de DropCoding.
Recuerda que si tienes alguna duda o sugerencia puedes dejarla en los comentarios de abajo.
¿Qué es la Etiqueta col en HTML?
Primero lo primero, ¿para qué sirve la etiqueta <col>? Esta etiqueta se utiliza para especificar propiedades de estilo para las columnas que están dentro de una tabla.
Puedes usarla dentro de la etiqueta <colgroup> o también fuera de este elemento, por ejemplo, dentro de una misma tabla.
Por cierto, en la próxima lección, vamos a ver la etiqueta
<colgroup>, que tiene mucho que ver con esta etiqueta.
Ejemplo de Uso de la Etiqueta <col>
Vamos a ver un ejemplo en el editor, para verlo un poco más claro.
Si os fijáis, tenemos dentro del body una tabla, y dentro de esta tabla tenemos el elemento <col>, o la etiqueta <col>.
De hecho, tenemos dos etiquetas <col> precedidas de un <colgroup>, la etiqueta que, por cierto, vamos a ver en el siguiente vídeo.
<body>
<table>
<!-- Usamos col para personalizar estilos de las columnas -->
<colgroup>
<col style="background-color: #4169e1">
<col style="background-color: #eef0f7">
</colgroup>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1.1</td>
<td>Dato 1.2</td>
</tr>
<tr>
<td>Dato 2.1</td>
<td>Dato 2.2</td>
</tr>
</tbody>
</table>
</body>Lo que hemos hecho aquí es colocar dos etiquetas <col>, y cada una de estas etiquetas hace referencia a una columna.
La primera columna se va a pintar de color azul, y la segunda columna tendrá un fondo de color gris.
Aquí evidentemente podemos poner los estilos que nosotros queramos, pero sigue siendo HTML.
Por eso la broma que he hecho al principio de que le hacía un poquito la competencia a CSS. Pero bueno, ahora me doy cuenta de que la broma es bastante mala. 😅
Si os fijáis, tenemos aquí efectivamente dos columnas. La primera se ha pintado de color azul, que es el color que le hemos puesto, y la segunda se ha pintado de color gris. Realmente no tiene más misterio.
Aquí podríamos hacer muchas más cosas, incluso podríamos hacer conjuntos de columnas.
Se utiliza de la forma que hemos visto, y si queremos seleccionar alguna columna en concreto, no hace falta que utilicemos CSS.
Espero que te haya resultado útil, y ya sabes que si tienes cualquier duda o tienes cualquier sugerencia, puedes dejarla en los comentarios.
¡Nos vemos en la próxima lección! Adiós.