Una cualidad interesante al combinar celdas es la que sin duda nos brindan los atributos colspan y rowspan, en esta publicación nos centraremos en la funcionalidad del atributo rowspan, el cual tiene como finalidad, extender una celda verticalmente según la cantidad que se le asigne.
Veremos un par de ejemplos que nos permitirán entender mencionado atributo.
Ejemplo 1:
Codigo HTML:
Utilizaremos rowspan="3"
Utilizaremos rowspan="3"
Resultado:
| 1 | 2 | |
| 3 | 4 | |
| 5 | 6 |
Como es notorio en el ejemplo al colocar rowspan="3" vemos como nuestra segunda columna se extiende verticalmente a lo largo de la tabla ocupando el tamaño de 3 celdas, que es determinado por el parámetro que le pusimos.
Ejemplo 2:
Ahora usaremos un rowspan="2" en la segunda columna de la tabla.
Código HTML:
Resultado:
| 1 | 2 | |
| 3 | 4 | |
| 5 | 6 |
Ahora al poner rowspan="2" en la segunda columna se observa que no ocupa toda la tabla, es por eso que la celda del numero 6 se pega a la celda del numero 5 , dejando así una celda vacía a los extremos.
Ahora colocaremos rowspan="2"en la segunda columna pero con una diferencia que esta ves añadiremos una celda con el numero 7 para completar la tabla.
Código HTML:
Resultado:
| 1 | 2 | |
| 3 | 4 | |
| 5 | 6 | 7 |
Por ultimo usamos rowspan="2" en este ejemplo, pero con una diferencia que aumentamos una celda mas en la tabla , de esa manera no queda un espacio vació como en el ejemplo numero 2.
Hay que tener en cuenta que el atributo rowspan se extiende verticalmente a lo largo de la tabla según el numero que se le asigne.
Combianar celdas en las tablas, es de cierta manera util a la hora de querer ejecutar distintos modelos de tablas, por eso es importante tener siempre en cuenta estos 2 atributos : rowspan y colspan
OJO: Tener en cuenta que no se nota muy bien los resultados de los ejemplos en todos los navegadores, se recomienda ejecutarlos en Google Chrome,
Cualquier duda o aporte lo pueden hacer por medio de un comentario, se agradece su tiempo . Muchas Gracias
0 comentarios: