<colgroup>El elemento <colgroup> en HTML5 se utiliza para agrupar una o más columnas dentro de una tabla, permitiendo aplicarles un estilo o asignarles atributos de manera conjunta. Este elemento es particularmente útil para definir el ancho y otros atributos relativos de las columnas en una tabla. Aquí hay una descripción completa de los atributos del elemento <colgroup>:
Adicionalmente, los siguientes atributos globales pueden ser aplicados, ya que <colgroup> hereda los atributos globales de HTML:
ltr para izquierda a derecha o rtl para derecha a izquierda).<colgroup> en HTML5: Ejemplos SencillosVeamos algunos ejemplos de cómo se puede utilizar el elemento <colgroup> en HTML5:
En este ejemplo, vamos a definir un grupo de columnas y asignarle anchos específicos usando el atributo width dentro de las columnas <col>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de colgroup</title>
</head>
<body>
<table border="1">
<colgroup>
<col style="width: 50%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
</tr>
<tr>
<td>Manzanas</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Naranjas</td>
<td>$0.80</td>
<td>100</td>
</tr>
</table>
</body>
</html>En este ejemplo, se utiliza el atributo class para aplicar estilos CSS a las columnas específicas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de colgroup con clases CSS</title>
<style>
.columna-grande {
background-color: lightblue;
}
.columna-pequena {
background-color: lightgreen;
}
</style>
</head>
<body>
<table border="1">
<colgroup>
<col class="columna-grande">
<col class="columna-pequena">
<col class="columna-pequena">
</colgroup>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
</tr>
<tr>
<td>Manzanas</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Naranjas</td>
<td>$0.80</td>
<td>100</td>
</tr>
</table>
</body>
</html>spanEn este ejemplo, se agrupan múltiples columnas utilizando el atributo span para abarcar varias columnas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de colgroup con span</title>
</head>
<body>
<table border="1">
<colgroup span="2" style="background-color: lightblue;">
<col style="background-color: lightgreen;">
</colgroup>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
</tr>
<tr>
<td>Manzanas</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Naranjas</td>
<td>$0.80</td>
<td>100</td>
</tr>
</table>
</body>
</html>En resumen, el elemento <colgroup> es una herramienta poderosa en HTML5 para definir el estilo y los atributos de las columnas en tablas, permitiendo un control más detallado y estilizado de cómo se presenta la información tabular en una página web.