Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

6. Tablas (III)

6.3 Fusión de celdas

Fusionar celdas consiste en unir varias celdas en una, haciendo que ésta ocupe el espacio de varias filas o columnas.

Fusión de celdas en la misma fila

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:

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.

Fusión de celdas en la misma columna

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:

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.

Fusión de celdas en filas y columnas

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.

Ejemplo celdas fusionadas.

Anidar tablas

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.

Ejemplo tablas anidadas.

En la siguiente página veremos más etiquetas y atributos para tablas que nos permitirán crear tablas avanzadas

Tablas avanzadas.

Página creada por ANYELGUTI.

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