Cómo combinar celdas de una tabla en Html
En ocasiones crear una tabla de ese modo tan cuadriculado no se acerca mucho a lo que queremos. A veces nos viene mejor que una de las celdas sea más larga o más alta que las otras, es decir, que ocupe varias celdas. Para lograr esto hay que recurrir a combinar celdas. Vamos a ver cómo se hace eso.
El ejemplo más clarito que se me puede ocurrir ahora mismo (con Carlitos dándome la lata con sus juguetes... je je je), es la de una tabla con, por ejemplo, tres columnas (verticales) pero en la que aparezca una sola celda arriba del todo, ocupando la anchura total de la tabla. Algo como esto:
Para conseguir eso, tenemos que colocar en esa primera fila una sola celda, pero hay que ponerle una palabra mágica para indicar a cuántas celdas corresponde o lo que es lo mismo, cuantas celdas hemos de combinar para conseguir esa tan ancha. Como el resto de filas tiene tres celdas, está claro que la superior ha de combinar también 3. Un poco lio? Je je je.
Primero te coloco el código Html completo de una celda de cinco filas (horizontales) y tres columnas, o tres celdas por fila, que es lo mismo. En la primera fila solo colocaré una celda, por ahora sin la palabra mágica para ver cómo queda:
Si copias ese código y lo pegas en un archivo poniéndole la extensión .html podrás ver el resultado haciendo doble clic sobre ese archivo. Eso si, no verás los bordes pues no los hemos definido aún. Yo los he puesto en las imágenes para que se vea más clara la tabla, pero para que aparezcan hay que especificarlo. Ya te contaré cómo. El resultado con el código de arriba sería algo así:
Por mucho que queramos, esa celda de arriba nunca podrá ser más ancha que la celda que tiene debajo suya, pues la tabla tiende a guardar el espacio de su derecha para otras celdas, que en este caso no existen. Para conseguir que esa primera celda ocupe todo el ancho de la tabla es necesario indicar que equivale a tres celdas. De ese modo ocupará todo el ancho, o el ancho de tres celdas.
El codigo Html que hay que añadirle a la etiqueta <td> para indicar que equivale a tres celdas es el siguiente:
Añadiendo esa palabra mágica conseguimos lo que decíamos al principio, una celda superior que ocupa todo el ancho, tres celdas combinadas:
En la página siguiente vemos cómo combinar varias celdas verticales, oki?
Más lecciones de Html:
