acerca de HTML

Referencia de etiquetas

Etiqueta col en HTML: columnas y propiedades CSS

La etiqueta <col> representa una o varias columnas dentro de un <colgroup>. Sirve para aplicar propiedades CSS compatibles a columnas completas sin repetir una clase en cada celda: por ejemplo, un fondo para las columnas de horas y plazas de una tabla de cursos. Úsala cuando quieras declarar esas columnas; el contenido de cada una sigue escrito en las filas de la tabla.

Ejemplo mínimo: dos columnas numéricas

<table>
  <caption>Cursos, duración en horas y plazas disponibles</caption>
  <colgroup>
    <col>
    <col class="numerica" span="2">
  </colgroup>
  <tr>
    <th scope="col">Curso</th>
    <th scope="col">Horas</th>
    <th scope="col">Plazas</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>12</td>
    <td>20</td>
  </tr>
</table>

Pega el fragmento dentro del cuerpo de un documento HTML. Verás tres columnas, con HTML, 12 y 20 bajo sus encabezados. El primer <col> representa «Curso»; el segundo representa las dos columnas consecutivas «Horas» y «Plazas». Entre ambos cubren las tres posiciones de la cuadrícula.

La clase numerica no dibuja nada por sí sola: falta una regla CSS que la utilice. Si retiras las declaraciones <col>, los encabezados y los datos permanecen, porque las celdas no están dentro de ellas. Si cambias span="2" por span="1", esa declaración solo representa «Horas», aunque la fila conserve sus tres celdas.

Sintaxis y contexto válido

<col> es un elemento vacío: escribe <col> o <col span="2">, sin contenido y sin </col>. No anides <td> ni <th> en él.

Su padre debe ser un <colgroup> sin atributo span. Coloca ese grupo dentro de <table>, después de <caption> si lo hay y antes de los grupos de filas o de las filas. En estos ejemplos escribimos explícitamente ambas etiquetas de <colgroup> para que se vea la estructura.

Las celdas pertenecen a un <tr>; <col> las representa por su posición en la cuadrícula, pero no es su padre en el DOM. Estas reglas se contrastan con el modelo de contenido de <col> en el estándar HTML.

Col, colgroup y colspan

Cada mecanismo resuelve una tarea diferente:

  • <col> declara una columna o varias consecutivas para propiedades compatibles.
  • <colgroup> agrupa columnas. Puede contener declaraciones <col>; si usa su propio span, no puede contenerlas.
  • colspan pertenece a una celda <td> o <th> y hace que esa celda ocupe varias posiciones de columna.

Por tanto, <col span="2"> no fusiona «Horas» y «Plazas». Ambas siguen teniendo su celda y su encabezado. Una celda con colspan="2" sí ocuparía dos posiciones, y habría que ajustar las demás celdas de esa fila para conservar la cuadrícula.

Qué propiedades CSS funcionan en col

Las columnas no se comportan como contenedores de texto. La especificación CSS sobre columnas de tablas distingue las propiedades que pueden influir en ellas:

  • background-color permite pintar un fondo de columna. Los fondos de grupos de filas, filas o celdas se dibujan por encima; deben ser transparentes para que se vea.
  • width interviene en el ancho. Con distribución automática, actúa como una restricción mínima; el contenido puede exigir más espacio. El caso práctico usa table-layout: fixed y una tabla de ancho definido para distribuirlo por porcentajes.
  • Los bordes de columna participan cuando la tabla utiliza border-collapse: collapse.
  • visibility: collapse está definido para retirar columnas de la presentación; no se utiliza en estos ejemplos.

color y text-align en <col> no se heredan a las celdas, porque estas no son sus descendientes. Selecciona directamente <th> y <td> para cambiar el texto, la alineación, la fuente o el relleno. Una regla como .numerica td tampoco encuentra las celdas de esa columna.

Caso práctico: fondo, ancho y números alineados

Guarda este documento completo como cursos-col.html, en UTF-8, y ábrelo en tu navegador. Los datos son ficticios. Incluye todo el CSS necesario; no necesita servidor, recursos externos ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Columnas de una tabla de cursos</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;
      }

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

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

      .cursos col.curso {
        width: 50%;
      }

      .cursos col.numerica {
        width: 25%;
        background-color: #e8f3fa;
      }

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

      .cursos tr > :nth-child(n + 2) {
        color: #1f2937;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <h1>Cursos disponibles</h1>
    <table class="cursos">
      <caption>Oferta de cursos: duración en horas y plazas disponibles</caption>
      <colgroup>
        <col class="curso">
        <col class="numerica" span="2">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Curso</th>
          <th scope="col">Horas</th>
          <th scope="col">Plazas</th>
        </tr>
      </thead>
      <tbody>
        <tr><th scope="row">HTML</th><td>12</td><td>20</td></tr>
        <tr><th scope="row">CSS</th><td>16</td><td>15</td></tr>
      </tbody>
    </table>
  </body>
</html>

La columna «Curso» ocupa aproximadamente la mitad del ancho; cada columna numérica recibe un cuarto. Ambas muestran fondo azul claro. La regla :nth-child(n + 2) alinea a la derecha las celdas desde la segunda posición de cada fila, incluidos sus encabezados.

Comprueba los efectos por separado:

  1. Cambia span="2" por span="1": el fondo queda solo en «Horas», mientras el selector sigue alineando ambas columnas numéricas.
  2. Retira el segundo <col>: desaparece ese fondo; los datos y la alineación permanecen.
  3. Añade temporalmente background-color: white a las celdas: su fondo tapa el de columna.
  4. Mueve text-align: right desde el selector de celdas a col.numerica: los números vuelven a la izquierda por la regla común de las celdas.

Este selector funciona porque cada fila tiene tres celdas, sin colspan ni rowspan. En tablas con celdas combinadas, la posición del hijo puede no coincidir con la columna visual: asigna clases a las celdas correspondientes.

Atributos y accesibilidad

El atributo específico span admite un entero de 1 a 1000; si se omite, representa una columna. No uses cero, valores negativos ni decimales. Los atributos globales, como class o id, permiten seleccionar el elemento, pero no amplían las propiedades CSS aplicables.

El atributo HTML histórico width es obsoleto: reemplázalo por la propiedad CSS width. Si trabajas con JavaScript, HTMLTableColElement.span es una propiedad DOM que refleja el atributo span; no hace falta utilizarla para estos ejemplos.

<col> no proporciona el nombre accesible de una columna. Conserva <caption> y los encabezados <th> con su scope, como explica la guía de tablas con encabezados de fila y columna de W3C WAI. «Horas» y «Plazas» identifican los datos incluso sin el fondo. El texto oscuro del ejemplo tiene contraste superior a 4,5:1 tanto sobre blanco como sobre azul claro. Desactivar JavaScript no cambia su contenido ni su presentación.

Errores y preguntas frecuentes

¿Col lleva cierre? No. Escribir </col> o poner texto entre sus etiquetas es incorrecto.

¿Col span y td colspan son iguales? No. span representa columnas consecutivas; colspan hace que una celda ocupe varias columnas.

¿Por qué no aparece el fondo? Comprueba el orden de los <col>, la suma de sus span, la clase y la regla CSS. Después revisa los fondos de las celdas y filas que pueden cubrirlo. No cambies el número de celdas para corregir un problema de pintura.

¿Por qué no funciona text-align? Aplica la propiedad a las celdas. Ni .numerica td ni col { text-align: right; } establecen su alineación.

Para continuar, <table> define la tabla, <colgroup> organiza las declaraciones de columnas, <td> contiene un dato y <th> identifica un encabezado. Elige cada elemento según esa función.

Compatibilidad y fuentes

Consulta realizada el 3 de octubre de 2026: el estándar indica soporte de <col> en los motores actuales, y MDN documenta su compatibilidad y notas de uso. Los ejemplos usan span, fondo y ancho; el soporte del elemento no implica que cualquier propiedad CSS aplicada a él modifique sus celdas.

Las fuentes normativas enlazadas fijan estructura y presentación. MDN también recoge los atributos históricos para reconocer código heredado; no son opciones para escribir HTML nuevo.