<col> en HTML5El elemento <col> en HTML5 es utilizado dentro de una tabla para aplicar un estilo y propiedades específicas a una o más columnas. Es un elemento vacío, lo que significa que no tiene contenido ni etiqueta de cierre.
El elemento <col> se usa en el contexto del elemento <colgroup>, que a su vez es utilizado para agrupar una o más columnas en una tabla. Los atributos principales que se pueden especificar en el elemento <col> son:
span: Define el número de columnas que el elemento <col> debe abarcar. Si no se especifica, su valor predeterminado es 1.
<col span="2">width (obsoleto en HTML5): Anteriormente se utilizaba para definir el ancho de las columnas, pero en HTML5 es mejor utilizar CSS para este propósito.
<!-- Método obsoleto -->
<col width="50%">Global Attributes: Como todos los elementos HTML, <col> puede aceptar ciertos atributos globales como class, id, style, y title:
<col class="highlighted-column" id="special-column" style="background-color: lightgrey;"><col> en HTML5 con ejemplos sencillosEl elemento <col> se utiliza para realizar el estilizado de columnas o aplicar atributos especiales a las columnas de una tabla de una manera más estructurada y simplificada. A continuación, se presentan ejemplos para ilustrar cómo se puede usar el elemento <col>.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<table border="1">
<colgroup>
<col span="1" style="background-color:lightblue">
<col span="1" class="highlight">
</colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>En este ejemplo, se define un grupo de columnas con <colgroup>. La primera columna tiene un fondo azul claro (lightblue), y la segunda columna tiene un fondo amarillo (highlight) utilizando una clase CSS.
span<!DOCTYPE html>
<html>
<head>
<style>
.grouped-columns {
background-color: lightgreen;
}
</style>
</head>
<body>
<table border="1">
<colgroup>
<col span="2" class="grouped-columns">
</colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<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>
</table>
</body>
</html>En este caso, se usa el atributo span para aplicar un estilo de fondo verde a las dos primeras columnas. El tercer <col> abarca en este caso solo la última columna de la tabla.
El elemento <col> es muy útil cuando necesitas aplicar estilos o propiedades a columnas enteras de una tabla, manteniendo el código HTML organizado y separado. Su principal ventaja es la capacidad de aplicar cambios fácilmente a varias columnas a la vez sin tener que introducir estilos en celdas individuales. El uso de <col> junto con CSS garantiza una mayor flexibilidad y un código más limpio y manejable.