La Etiqueta COL

La etiqueta <col> permite definir propiedades para columnas específicas en una tabla HTML, dentro de un grupo de columnas <colgroup>. Es útil para aplicar estilos o atributos a múltiples celdas de manera eficiente, evitando repetir código.

Sintaxis básica

<table>
  <colgroup>
    <col>          <!-- Columna 1 -->
    <col span="2"> <!-- Columnas 2 y 3 -->
  </colgroup>
  <!-- Filas y celdas -->
</table>

Atributos clave

Atributo	Descripción
span	Número de columnas que afecta (por defecto: 1)
style	CSS en línea (solo algunas propiedades funcionan)
class	Clase CSS para estilos reutilizables
width	Define el ancho de la columna (obsoleto en HTML5, usar CSS)

Casos de uso comunes

Establecer anchos de columnas

<table>
  <colgroup>
    <col style="width: 150px"> <!-- Columna 1 -->
    <col style="width: 250px"> <!-- Columna 2 -->
  </colgroup>
  <tr>
    <th>Producto</th>
    <th>Descripción</th>
  </tr>
</table>

Alternar colores de fondo

<table>
  <colgroup>
    <col style="background: #f8f9fa">
    <col style="background: #e9ecef">
  </colgroup>
  <tr>
    <td>Manzanas</td>
    <td>$2.50</td>
  </tr>
</table>

Agrupar columnas con <span>

<table>
  <colgroup>
    <col span="2" style="background: #e9ecef"> <!-- Columnas 1 y 2 -->
    <col> <!-- Columna 3 -->
  </colgroup>
  <tr>
    <td>Nombre</td>
    <td>Email</td>
    <td>Teléfono</td>
  </tr>
</table>

Limitaciones de CSS en <col>

Solo funcionan estas propiedades:

• width
• background
• border
• visibility

<!-- Ejemplo válido -->
<col style="width: 200px; background: #f0f0f0; border-right: 2px solid red">

<!-- Ejemplo inválido (text-align no funciona) -->
<col style="text-align: center"> <!-- ¡No tendrá efecto! -->

Accesibilidad

• Los lectores de pantalla ignoran los estilos aplicados con <col>.

Buenas prácticas:

• Usar <th> para encabezados claros.

• Complementar con atributos aria-label si el estilo transmite información relevante:

<col aria-label="Columna de precios en dólares">

Errores comunes

Usar <col> fuera de <colgroup>

<!-- Incorrecto -->
<table>
  <col style="width: 100px"> <!-- ¡Falta <colgroup>! -->
</table>

Confundir <col> con <td>

<!-- Incorrecto -->
<col>
  <td>Datos</td> <!-- <col> no contiene celdas -->
</col>

Aplicar estilos no compatibles

<col style="color: red; font-weight: bold"> <!-- ¡No funciona! -->

Ejemplo avanzado

<table border="1">
  <colgroup>
    <col class="destacada">
    <col span="2" style="width: 120px">
  </colgroup>
  <tr>
    <th>País</th>
    <th>Población</th>
    <th>Idioma</th>
  </tr>
  <tr>
    <td>México</td>
    <td>126M</td>
    <td>Español</td>
  </tr>
</table>

<style>
  .destacada {
    background: #fff3cd; /* Color de fondo para la primera columna */
    width: 200px;
  }
</style>

Buenas prácticas

Orden en la tabla:

<colgroup> debe ir después de <caption> y antes de <thead>/<tbody>

Usar clases CSS en lugar de estilos en línea:

<col class="ancho-fijo">

Validar HTML:

Asegurar que el número de <col> coincida con las columnas de la tabla.

Comparación con elementos similares

Elemento	Propósito	Ejemplo
<col>	Estilos para columnas	Anchos, fondos
<th>	Encabezados de tabla	Títulos de columnas
<td>	Celdas de datos	Contenido de la tabla

Conclusión:

La etiqueta <col> es ideal para:

• Aplicar estilos consistentes a múltiples columnas.
• Simplificar el mantenimiento de tablas complejas.
• Evitar repetición de código en celdas individuales.

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