HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 141
Visitas el mes pasado: 479
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Fusionar celdas consiste en unir varias celdas en una, haciendo que ésta ocupe el espacio de varias filas o columnas.
Para que una celda ocupe dos o más columnas dentro de la misma fila, se utiliza
el atributo colspan
. El valor de este atributo es el número de
columnas que queremos que ocupe la celda. Veamos un ejemplo:
Columna 1 | Columna 2 | Columna 3 | Columna 4 |
---|---|---|---|
F1-C1 | Fusión celdas F1-C2 y F1-C3 | F1-C4 | |
Fusión celdas F2-C1 y F2-C2 | Fusión celdas F2-C3 y F2-C4 | ||
Fusión celdas F3-C1, F3-C2, F3-C3 y F3-C4 |
La tabla de este ejemplo tiene el siguiente código HTML:
<table width="80%" border="1" cellspacing="0" cellpadding="5"> <tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> <th>Columna 4</th> </tr> <tr> <td> F1-C1</th> <td colspan="2"> Fusión celdas F1-C2 y F1-C3</td> <td> F1-C4</td> </tr> <tr> <td colspan="2">Fusión celdas F2-C1 y F2-C2</td> <td colspan="2">Fusión celdas F2-C3 y F2-C4</td> </tr> <tr> <td colspan="4">Fusión celdas F3-C1, F3-C2, F3-C3 y F3-C4</td> </tr> </table>
En el código anterior observamos que todas las filas deben tener el mismo número de columnas (no de celdas), de no ser así la tabla no se
muestra correctamente. Cada atributo colspan
marca las columnas que
ocupa la celda a la que pertenece. No se cuenta el número de celdas, sino el de columnas
que ocupa la fila, que debe ser siempre el mismo.
Por tanto si en una celda (etiqueta td o th) hay un atributo colspan="2"
la celda está ocupando dos columnas, por lo que deberemos poner una celda menos para que el número de
colummas sea el mismo que en las demás filas.
De forma análoga a lo visto anteriormente, podemos fusionar varias celdas contiguas que
estén en la misma columna; para ello utilizaremos el atributo rowspan
. Al igual que
en el caso anterior, el valor del atributo será el número de celdas que queramos fusionar.
Para no confundirse al escribir el código, es conveniente dibujar primero la tabla en un papel para hacerse a la idea de las celdas que debemos poner en cada fila, ya que si un espacio de celda de una fila está ocupado por una celda fusionada de la fila anterior, no debemos incluir ninguna etiqueta para ese espacio de celda, pasando a la etiqueta de la celda siguiente. Veamos un ejemplo:
Fila 1 | F1-C1 | Fusión F1-C2 y F2-C2 | Fusión F1-C3, F2-C3 y F3-C3 | Fusión F1-C4, F2-C4, F3-C4 y F4-C4 |
---|---|---|---|---|
Fila 2 | Fusion F2-C1 y F3-C1 | |||
Fila 3 | Fusión F3-C2 y F4-C2 | |||
Fila 4 | F4-C1 | F4-C3 |
El código HTML de esta tabla es el siguiente: :
<table width="80%" border="1" cellspacing="0" cellpadding="5"> <tr> <th>Fila 1</th> <td>F1-C1</td> <td rowspan="2">Fusión F1-C2 y F2-C2</td> <td rowspan="3">Fusión F1-C3, F2-C3 y F3-C3</td> <td rowspan="4">Fusión F1-C4, F2-C4, F3-C4 y F4-C4</td> </tr> <tr> <th>Fila 2</th> <td rowspan="2">Fusion F2-C1 y F3-C1</td> </tr> <tr> <th>Fila 3</th> <td rowspan="2">Fusión F3-C2 y F4-C2< </tr> <tr> <th>Fila 4</th> <td>F4-C1</td> <td>F4-C3</td> <tr> </table>
Si una fila está ya ocupada por
una celda fusionada con otra de una fila superior, no debemos marcarla con
ninguna etiqueta, ya que está indicada mediante el atributo rowspan
en la fila superior.
Como ya se ha indicado, es conveniente, antes de crear la tabla en
HTML, hacer un esquema de la misma sobre papel, para tener en cuenta cuantas
etiquetas de celda (td
y th
) hay que poner para que
la tabla se forme de manera correcta.
También se pueden fusionar filas y columnas a la vez en la misma tabla, para ello
sólo hay que combinar los atributos colspan
y rowspan
para obtener celdas de diferentes tamaños y ocupando varias filas y columnas a
la vez, según como queramos el diseño de la tabla.
En el siguiente enlace se muestra una página de ejemplo con una tabla compleja en el que se fusionan celdas tanto en horizontal como en vertical. Debajo de la tabla se muestra su código en HTML.
Al igual que con las listas, también podemos incluir una tabla dentro de otra, para ello basta con meter el contenido de la tabla secundaria dentro de una celda de la tabla principal. La siguiente página de ejemplo muestra varias tablas anidadas dentro de una tabla principal.
En la siguiente página veremos más etiquetas y atributos para tablas que nos permitirán crear tablas avanzadas
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com