Definición destacada
¿Como funciona el comando en HTML5: 'colgroup'?
Última modificación: 2024-06-18
Descripción del Elemento HTML5 <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>:
- span: Este atributo indica el número de columnas que abarca el grupo de columnas. Es opcional y su valor por defecto es 1. Si se especifica, debe ser un número entero positivo.
Adicionalmente, los siguientes atributos globales pueden ser aplicados, ya que <colgroup> hereda los atributos globales de HTML:
- class: Asigna una o varias clases CSS al grupo de columnas.
- id: Define un identificador único para el grupo de columnas.
- style: Permite aplicar estilos en línea al grupo de columnas.
- title: Proporciona información adicional sobre el grupo de columnas como un tooltip.
- lang: Especifica el idioma del contenido del grupo de columnas.
- dir: Define la dirección del texto del grupo de columnas (
ltrpara izquierda a derecha ortlpara derecha a izquierda).
Uso de <colgroup> en HTML5: Ejemplos Sencillos
Veamos algunos ejemplos de cómo se puede utilizar el elemento <colgroup> en HTML5:
Ejemplo 1: Definiendo el Ancho de las Columnas
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>Ejemplo 2: Aplicando Clases CSS a las Columnas
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>Ejemplo 3: Utilizando el Atributo span
En 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.