Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 443

Visitas el mes pasado: 557

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

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




6. Tablas (III)

6.3 Fusión de celdas

html

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:


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.


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:

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.


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.



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com