El Atributo COLSPAN

Se utiliza en tablas HTML para fusionar celdas horizontalmente, permitiendo que una celda ocupe múltiples columnas.

El atributo colspan se utiliza en tablas HTML para fusionar celdas horizontalmente, permitiendo que una celda ocupe múltiples columnas. Es esencial para crear tablas complejas y organizar información de manera clara.

¿Qué es colspan?

  • Propósito:
    Indica cuántas columnas debe abarcar una celda (<td> o <th>).

  • Valor:
    Un número entero (ej: 2, 3).

  • Compatibilidad:
    Funciona en todos los navegadores modernos.

Sintaxis básica

<td colspan="número-de-columnas">Contenido</td>

Ejemplos prácticos

Tabla simple con celda fusionada

<table border="1">
  <tr>
    <th colspan="2">Encabezado fusionado</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Resultado:

Encabezado fusionado
Celda 1 Celda 2

Tabla de horario de clases

<table border="1">
  <tr>
    <th>Hora</th>
    <th colspan="3">Lunes</th>
  </tr>
  <tr>
    <td>09:00</td>
    <td>Matemáticas</td>
    <td>Historia</td>
    <td>Arte</td>
  </tr>
</table>

Resultado:

Hora Lunes
09:00 Matemáticas Historia Arte

Combinar colspan con rowspan

<table border="1">
  <tr>
    <th colspan="2">Nombre</th>
    <th rowspan="2">Edad</th>
  </tr>
  <tr>
    <th>Primer nombre</th>
    <th>Apellido</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Pérez</td>
    <td>28</td>
  </tr>
</table>

Resultado:

Nombre Edad
Primer nombre Apellido
Ana Pérez 28

Errores comunes

Usar colspan mayor al número de columnas disponibles:

Si una fila tiene 3 columnas, colspan="4" romperá el diseño.

No ajustar el número de celdas en filas siguientes:

Tras fusionar celdas, las filas deben tener menos celdas para coincidir.

<!-- Incorrecto -->
<tr>
  <td colspan="2">Fusión</td>
  <td>Celda extra</td> <!-- Sobra una celda -->
</tr>

Mejores prácticas

Calcula el total de columnas:

Si una fila tiene 4 columnas y una celda usa colspan="2", las siguientes celdas deben sumar 2 columnas.

<tr>
  <td colspan="2">Ocupa 2 columnas</td>
  <td>Columna 3</td>
  <td>Columna 4</td> <!-- Error: total = 2 + 1 + 1 = 4 -->
</tr>

Usa <th> para encabezados:

Mejora la accesibilidad y semántica.

Combina con CSS para estilos:

Aplica bordes y márgenes para claridad visual.

<style>
  table { border-collapse: collapse; }
  td, th { border: 1px solid #333; padding: 8px; }
</style>

Ejemplo avanzado: Reporte de ventas

<table>
  <tr>
    <th colspan="4">Reporte de Ventas 2023</th>
  </tr>
  <tr>
    <th>Producto</th>
    <th>Trimestre 1</th>
    <th>Trimestre 2</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Laptops</td>
    <td>$5,000</td>
    <td>$7,500</td>
    <td>$12,500</td>
  </tr>
  <tr>
    <td colspan="3"><strong>Total General</strong></td>
    <td>$12,500</td>
  </tr>
</table>

Conclusión

El atributo colspan es clave para:

  • Organizar datos complejos en tablas.

  • Mejorar la legibilidad al fusionar celdas relevantes.

  • Crear diseños estructurados y profesionales.

¡Domina colspan para construir tablas claras y funcionales!