Cómo combinar celdas verticales en una tabla Html
Al igual que se pueden combinar celdas horizontales para formar una sola más ancha, también existe una palabra mágica para conseguir combinar dos o más celdas verticales para formar una de más altura. Veamos cómo se hace.
Imaginemos una tabla inicial ahora de tres filas y tres celdas por cada una de ellas, es decir, de 3x3, tal y como esta:
El código Html de esa tabla sería algo como esto:
Disculpa, no se me ocurre otro más representativo ;=). Imaginad que no es esa la estructura que quiero, sino que prefiero colocar una sola imagen a la izquierda, ocupando todo el alto de la tabla y no tres huecos para tres imágenes como hay ahora. La solución es combinar las tres celdas verticales para dejarla de este otro modo:
La palabra mágica a colocar en este caso de combinaciones de celdas en vertical será <td rowspan="3">. Es decir, colspan para combinar celdas horizontales y rowspan para combinar celdas verticales, oki? Además, recuerda que hay que colocar la cantidad de celdas que quieres que ocupe la que combinamos. En el caso de nuestro ejemplo queremos combinar las tres celdas en una, de modo que en el código inicial tendríamos que eliminar el código Html correspondiente a las celdas de imagen de la segunda y tercera fila y, en la que queda (la de la primera) colocarle <td rowspan="3">, quedándo así el código Html:
El resultado sería el de la última imagen que pusimos arriba. Como ves, en el código de la primera fila se colocan las etiquetas td de la celda de la imagen, y las otras dos de su derecha. En cambio en las otras dos filas solo se colocan las etiquetas td de los contenidos y nada de la celda de imagen, pues está toda contenida ya en el código de la fila primera. Con la palabra <td rowspan="3"> se indicaba ya que la celda ocuparía las otras dos de debajo de esa, por lo que no es necesario colocar nada de código en las filas dos y tres correspondientes a la celda de imagen.
Esto es un poco rollo y quizás no se entienda bien a la primera. Si no me he explicado perfectamente dímelo en el foro y lo intento explicar mejor, oki compañero?
Más lecciones de Html:
