El Atrubuto SPAN

El atributo span en HTML se utiliza en elementos de tabla (<colgroup> y <col>) para especificar cuántas columnas debe abarcar un grupo de columnas. Este atributo es esencial para aplicar estilos o funcionalidades a múltiples columnas de una tabla de manera eficiente. A continuación, te explicamos cómo implementarlo correctamente.

1. Introducción al atributo span

• Propósito:
  Definir el número de columnas que un grupo de columnas (<colgroup>) o una columna individual (<col>) debe cubrir en una tabla.

• Elementos compatibles:

  • <colgroup>: Agrupa columnas para aplicar estilos comunes.

  • <col>: Define propiedades individuales para columnas dentro de un <colgroup>.

• Valor:
  Un número entero positivo (ej.: 2, 3). Si se omite, el valor predeterminado es 1.

2. Sintaxis básica

<table>
  <colgroup span="2" style="background-color: #f0f0f0;"></colgroup>
  <colgroup>
    <col span="1" style="background-color: #e0e0e0;">
    <col span="1" style="background-color: #d0d0d0;">
  </colgroup>
  <!-- Filas y celdas de la tabla -->
</table>

3. Ejemplos prácticos

Ejemplo 1: Agrupar columnas con <colgroup>

<table border="1">
  <colgroup span="2" style="background-color: lightblue;"></colgroup>
  <colgroup span="1" style="background-color: lightgreen;"></colgroup>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Gómez</td>
    <td>28</td>
  </tr>
</table>

Resultado:

• Las primeras dos columnas ("Nombre" y "Apellido") tendrán fondo azul claro.

• La tercera columna ("Edad") tendrá fondo verde claro.

Ejemplo 2: Combinar <col> dentro de <colgroup>

<table border="1">
  <colgroup>
    <col span="1" style="width: 100px;">
    <col span="2" style="background-color: #ffd700;">
  </colgroup>
  <tr>
    <th>Producto</th>
    <th>Precio</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$1200</td>
    <td>10</td>
  </tr>
</table>

Resultado:

• La columna "Producto" tendrá un ancho fijo de 100px.

• Las columnas "Precio" y "Stock" tendrán fondo dorado.

Ejemplo 3: Horario semanal

<table border="1">
  <colgroup span="5" style="background-color: #f8f8f8;"></colgroup>
  <colgroup span="2" style="background-color: #e8e8e8;"></colgroup>
  <tr>
    <th>Lunes</th>
    <th>Martes</th>
    <th>Miércoles</th>
    <th>Jueves</th>
    <th>Viernes</th>
    <th>Sábado</th>
    <th>Domingo</th>
  </tr>
  <tr>
    <td>Reunión</td>
    <td>Trabajo</td>
    <td>Estudio</td>
    <td>Gimnasio</td>
    <td>Descanso</td>
    <td>Viaje</td>
    <td>Familia</td>
  </tr>
</table>

Resultado:

• Días laborables (Lunes-Viernes) tendrán fondo gris claro.

• Fin de semana (Sábado-Domingo) tendrán fondo gris más oscuro.

4. Buenas prácticas

1. Usar para estilos generales:
   Aplica span en <colgroup> o <col> para definir anchos, colores o bordes comunes.

2. Orden en la tabla:
   Define los <colgroup> y <col> antes de las filas (<tr>).

3. Accesibilidad:
   Asegúrate de que los estilos no afecten la legibilidad (contraste de colores).

5. Errores comunes

• Valores incorrectos:
  Usar span="0" o números mayores que las columnas disponibles.

• Confundir con colspan:
  colspan se usa en celdas (<td> o <th>) para expandirlas horizontalmente.

• Olvidar cerrar etiquetas:
  <colgroup> debe cerrarse correctamente, incluso si contiene <col>.

6. Diferencias clave: span vs colspan

7. Conclusión

El atributo span es útil para:

• Organizar tablas complejas con estilos coherentes.

• Simplificar el código al evitar repetir estilos en cada celda.

• Mejorar el mantenimiento al centralizar reglas CSS en grupos de columnas.

Ejemplo final:

<table border="1">
  <colgroup span="3" style="background-color: #f5f5f5;"></colgroup>
  <colgroup>
    <col span="1" style="width: 150px;">
    <col span="1" style="background-color: #90EE90;">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>Artículo</th>
    <th>Categoría</th>
    <th>Precio</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>001</td>
    <td>Teclado</td>
    <td>Electrónicos</td>
    <td>$50</td>
    <td>25</td>
  </tr>
</table>