acerca de HTML

Referencia de etiquetas

Etiqueta colgroup en HTML: grupos de columnas

La etiqueta <colgroup> representa un grupo de columnas de una tabla. Sirve para organizar columnas consecutivas y aplicarles propiedades CSS compatibles, como un fondo común. Úsala, por ejemplo, para distinguir las dos columnas de importes de un presupuesto: los datos siguen escritos en las celdas de cada fila.

Ejemplo mínimo: declarar dos columnas

<table>
  <caption>Duración de un curso</caption>
  <colgroup>
    <col class="curso">
    <col class="horas">
  </colgroup>
  <tr>
    <th scope="col">Curso</th>
    <th scope="col">Horas</th>
  </tr>
  <tr><td>HTML</td><td>12</td></tr>
</table>

Pega el fragmento dentro del cuerpo de un documento HTML. Verás «Curso» y «Horas», con HTML y 12 debajo. Los dos <col> declaran las dos posiciones de columna existentes; sus clases no cambian la apariencia sin CSS.

Si retiras todo el <colgroup>, los datos permanecen. El grupo no crea celdas ni filas, y aumentar su span no añade datos: ajusta las declaraciones a la cuadrícula formada por <tr>, <th> y <td>.

Sintaxis y lugar dentro de table

Escribe <colgroup> como hijo de <table>, después de <caption> si existe y antes de <thead>, <tbody>, <tfoot> o las filas <tr>. Puedes declarar varios grupos consecutivos.

El modelo de contenido del estándar HTML distingue dos formas:

  • Con span: el grupo no tiene contenido. <colgroup span="2"></colgroup> representa dos columnas consecutivas.
  • Sin span: puede contener cero o más elementos <col> y <template>. En una tabla ordinaria, usa <col> para declarar cada columna o conjunto de columnas.

No combines span en el grupo con hijos <col>, ni pongas texto, filas o celdas dentro. Sin hijos <col> y sin span, representa una columna; con hijos, la extensión la determinan esos <col> y sus respectivos span.

Los ejemplos muestran apertura y cierre explícitos. HTML permite omitirlos bajo las condiciones indicadas en el estándar; el cierre puede omitirse si después del grupo no hay inmediatamente un espacio ASCII ni un comentario. <col>, en cambio, es un elemento vacío y no lleva </col>.

Qué estilos afectan a un grupo de columnas

Las propiedades de columnas definidas por CSS tienen efectos concretos:

  • background-color pinta el fondo del grupo. Los fondos de columnas, grupos de filas, filas y celdas se dibujan encima; deben ser transparentes para dejarlo visible.
  • width establece una anchura mínima para las columnas representadas. El algoritmo de distribución de la tabla y su contenido también intervienen; no supone un máximo que recorte el texto.
  • Los bordes del grupo participan con border-collapse: collapse, sujetos a las reglas que resuelven bordes coincidentes. Con border-collapse: separate, no dibujan el borde del grupo.
  • visibility: collapse está definido para retirar de la presentación las columnas del grupo; no se usa en estos ejemplos.

color y text-align no se heredan a las celdas desde <colgroup>: las celdas son descendientes de las filas, no del grupo. Aplica alineación, color, fuente o relleno directamente a <th> y <td>. El selector .numeros td tampoco encuentra las celdas representadas por un grupo con esa clase.

Caso práctico: dos columnas de gastos familiares

Guarda este documento como gastos-colgroup.html, en UTF-8, y ábrelo en tu navegador. Los importes son ficticios, en pesos mexicanos. Incluye todo el CSS y funciona sin servidor, archivos externos ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gastos familiares por mes</title>
    <style>
      body {
        max-width: 42rem;
        margin: 2rem auto;
        padding: 0 1rem;
        background-color: #fff;
        color: #1f2937;
        font-family: sans-serif;
        line-height: 1.5;
      }

      .gastos {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
      }

      .gastos caption {
        padding-block: 0.75rem;
        text-align: left;
      }

      .gastos colgroup.concepto { width: 50%; }
      .gastos colgroup.numeros {
        width: 25%;
        background-color: #e8f3fa;
      }

      .gastos th,
      .gastos td {
        padding: 0.5rem;
        border: 1px solid #667;
        overflow-wrap: anywhere;
        text-align: left;
      }

      .gastos tr > :nth-child(n + 2) { text-align: right; }
    </style>
  </head>
  <body>
    <h1>Gastos familiares</h1>
    <table class="gastos">
      <caption>Importes mensuales en pesos mexicanos</caption>
      <colgroup class="concepto"></colgroup>
      <colgroup class="numeros" span="2"></colgroup>
      <thead>
        <tr>
          <th scope="col">Concepto</th>
          <th scope="col">Octubre</th>
          <th scope="col">Noviembre</th>
        </tr>
      </thead>
      <tbody>
        <tr><th scope="row">Alimentos</th><td>3200</td><td>3400</td></tr>
        <tr><th scope="row">Transporte</th><td>800</td><td>750</td></tr>
      </tbody>
    </table>
  </body>
</html>

El primer grupo representa «Concepto». El segundo reúne «Octubre» y «Noviembre» y pinta ambas de azul claro. Con la tabla de ancho definido y table-layout: fixed, la primera columna recibe aproximadamente la mitad del espacio y cada columna numérica un cuarto. Las celdas numéricas se alinean a la derecha mediante su propio selector.

Comparar span con dos hijos col

Sustituye únicamente el segundo grupo por este fragmento:

<colgroup class="numeros">
  <col>
  <col class="noviembre">
</colgroup>

Ahora añade al final del <style>:

.gastos .numeros col { width: 25%; }
.gastos col.noviembre { background-color: #eff9ed; }

Siguen siendo dos columnas numéricas, pero cada <col> permite una regla individual. «Octubre» conserva el azul del grupo y «Noviembre» muestra verde claro. Las anchuras se declaran también sobre los hijos para controlarlas directamente.

El verde no gana por tener mayor especificidad que la regla azul: las declaraciones afectan a elementos diferentes. El fondo de <col> se pinta encima del fondo de <colgroup>. La cascada decide las declaraciones de cada elemento; después, las capas de la tabla determinan qué fondo ves.

Comprueba estos cambios por separado, partiendo del documento original:

  1. Cambia span="2" a span="1": el grupo azul representa solo «Octubre»; «Noviembre» conserva sus datos.
  2. Retira los dos grupos: desaparecen el fondo y las anchuras declaradas; con este algoritmo, las tres columnas se reparten por igual. Los números siguen alineados a la derecha.
  3. Añade background-color: white a las celdas: su fondo tapa el del grupo, aunque la regla azul siga aplicándose.
  4. Mueve la alineación derecha del selector de celdas a colgroup.numeros: las celdas mantienen la alineación izquierda de la regla común.

El selector por posición funciona porque todas las filas tienen tres celdas, sin combinaciones. Con colspan o rowspan, utiliza clases en las celdas que deban alinearse: su posición como hijo puede diferir de su columna visual.

Atributos y accesibilidad

span es el atributo específico: admite un entero entre 1 y 1000, con valor predeterminado 1 cuando no hay hijos <col>. No uses cero, negativos ni decimales. colspan y rowspan pertenecen a las celdas y no son atributos de <colgroup>.

class, id y lang son atributos globales. width es aquí una propiedad CSS; evita los atributos de presentación históricos como width, align o bgcolor. En JavaScript, HTMLTableColElement.span es una propiedad DOM que refleja el atributo; estos ejemplos no necesitan usarla.

El grupo no sustituye a los encabezados accesibles. Mantén <caption> y los <th> con scope="col" o scope="row", como recomienda la guía de tablas con dos tipos de encabezado de W3C WAI. Los nombres y los importes permiten entender la tabla sin sus colores. No hace falta añadir un rol ARIA al grupo.

Errores y preguntas frecuentes

¿Colgroup crea columnas de datos? Representa columnas; las celdas se escriben en las filas. Para añadir otro mes, añade su encabezado y sus celdas, y después ajusta las declaraciones de columnas.

¿Por qué no funciona text-align? Aplica la propiedad a las celdas. El grupo no es su contenedor DOM y no les transmite la alineación.

¿Por qué no aparece el fondo? Comprueba primero posición, span, clase y regla CSS. Después revisa los fondos de <col>, filas y celdas que pueden cubrirlo. Para diagnosticar un borde, revisa también border-collapse y los bordes coincidentes.

Usa <colgroup> para el conjunto y <col> para declaraciones individuales. <table> contiene la tabla, <th> identifica un encabezado y <td> contiene un dato: cada uno tiene su función.

Compatibilidad y fuentes

Consulta realizada el 3 de octubre de 2026: el estándar registra soporte de <colgroup> en los motores actuales y MDN recoge su compatibilidad y notas de uso. Los ejemplos utilizan span, fondos y anchuras; esa compatibilidad no convierte todas las propiedades CSS en propiedades de columna.

Las fuentes normativas enlazadas explican estructura, atributos y presentación. Para entender los fondos superpuestos, consulta también las capas y transparencia de las tablas en CSS.