La Etiqueta COLGROUP

La etiqueta <colgroup> permite aplicar estilos o atributos a grupos de columnas en una tabla HTML, evitando repetir configuraciones en cada celda. Es útil para definir anchos, fondos o bordes consistentes en columnas específicas.

Sintaxis básica

<table>
  <colgroup>
    <col> <!-- Define una columna -->
    <col span="2"> <!-- Agrupa 2 columnas -->
  </colgroup>
  <!-- Filas y celdas -->
</table>

Casos de uso comunes

Definir anchos de columnas

<table>
  <colgroup>
    <col style="width: 20%">
    <col style="width: 50%">
    <col style="width: 30%">
  </colgroup>
  <tr>
    <td>Nombre</td>
    <td>Email</td>
    <td>Teléfono</td>
  </tr>
</table>

Aplicar fondos a grupos de columnas

<table>
  <colgroup>
    <col style="background: #f8f9fa">
    <col span="2" style="background: #e9ecef">
  </colgroup>
  <tr>
    <td>Producto</td>
    <td>Precio</td>
    <td>Stock</td>
  </tr>
</table>

Atributos clave

Atributo	Descripción
span	Número de columnas que abarca el grupo (si no se usa <col>)
style	CSS en línea para el grupo
class	Clase CSS para estilos reutilizables

Ejemplo avanzado

<table border="1">
  <colgroup>
    <col class="nombre">
    <colgroup span="2" style="background: #e9ecef">
      <col>
      <col style="width: 100px">
  </colgroup>
  <tr>
    <th>Nombre</th>
    <th>Ventas Q1</th>
    <th>Ventas Q2</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>$5,000</td>
    <td>$7,200</td>
  </tr>
</table>

<style>
  .nombre {
    background: #f8f9fa;
    width: 150px;
  }
</style>

Accesibilidad

• Limitaciones: Los lectores de pantalla no anuncian los estilos aplicados con <colgroup>.

• Buenas prácticas:

  • Usar atributos aria-label si el estilo transmite información importante.

  • Complementar con etiquetas semánticas (<th>, <caption>).

Errores comunes

Anidación incorrecta

<!-- Incorrecto -->
<table>
  <tr>
    <colgroup> <!-- Debe estar antes de las filas -->
      <col>
    </colgroup>
  </tr>
</table>

Usar propiedades CSS no compatibles

<col style="color: red"> <!-- No funciona -->

Ignorar el orden en la tabla

<table>
  <thead> <!-- Incorrecto: <colgroup> debe ir antes -->
  <colgroup>...</colgroup>
</table>

Buenas prácticas

Orden correcto: <table> → <caption> → <colgroup> → <thead>/<tbody>

Usar <col> para control individual: Cada <col> dentro de <colgroup> representa una columna.

Evitar estilos en línea: Preferir clases CSS para mantenimiento fácil.

Comparación con elementos similares

Elemento	Propósito	Ejemplo
<colgroup>	Estilos para grupos de columnas	Anchos, fondos
<thead>	Encabezados de tabla	Títulos de columnas
<tbody>	Cuerpo de la tabla	Filas de datos

Conclusión:

La etiqueta <colgroup> es esencial para:

• Simplificar el diseño de tablas complejas.
• Mantener estilos consistentes en columnas.
• Mejorar la organización del código HTML.

¡Úsala para crear tablas más limpias y profesionales!