Header Ads

Combinación de Celdas (Atributo colspan)

Como ya vimos en muchos ejemplos sobre Tablas HTML en este blog, podemos aplicar distintos atributos que nos permiten dar cualidades extras a nuestras tablas, en este oportunidad, aprenderemos las cualidades que nos brinda el uso del atributo colspan.

El Atributo colspan, Expande una celda horizontalmente,  para comprendedlo mejor aplicaremos un par de ejemplos que nos permitirán visualizar mejor las propiedades de dicho atributo.

Ejemplo 1 :

Aplicaremos <td colspan="3"> en la segunda fila de nuestra tabla y tendremos el siguiente código:

Código HTML:



Resultado:

1 2 3
4 5 6

Como observamos en nuestro primer ejemplo al aplicar <td colspan="3"> en la segunda fila, vemos como esta se extiende horizontalmente a lo largo de la cantidad de celdas que indicamos, como en este caso indicamos coslpan="3", la fila se extendió hasta cubrir el tamaño de 3 celdas en la tabla.

Ejemplo 2:

En este ejemplo aplicaremos <td colspan="2">, usaremos el mismo código HTML, del ejemplo anterior, con la única diferencia del atributo colspan.

Resultado:

1 2 3
4 5 6

Ahora en el segundo ejemplo podemos observar que al colocar colspan="2", la expansión de la fila solo cubre 2 celdas que es lo asignado en el atributo colspan.


OJO: la aplicación de esto ejemplos , sufre diversos cambios según el navegador que estemos utilizando, funciona correctamente en Google Chrome y tambien es visible en Firefox, pero en IE los resultados no se observan correctamente.

No  probé en otros navegadores, pero si tienen la oportunidad por favor comenten el resultado que se visualiza en los navegadores diferentes a los ya mencionados.






No hay comentarios