3.201 cursos gratis
6.233.243 alumnos
Publica tu curso gratis
Busca cursos gratis:
Estás aquí: mailxmail > Cursos de Informática > Internet > Manual HTML > Combinación de celdas

Manual HTML

Autor: Silvestre Goxcon Blas
Curso:  4,65/5 4,65/5 (102 opiniones) |26848 alumnos|Fecha publicación: 25/11/2004
Capítulos del curso

Capítulo 28:

 Combinación de celdas

La combinación de celdas permite obtener diseños de tablas más sofisticados que pueden utilizarse para titulares, marcos de imagen, etc.

Para combinar celdas se usa la instrucción Colspan o Rowspan, ya sea que se deseen combinar columnas o filas.

Por ejemplo, la siguiente instrucción combina las tres columnas de la primera fila de una tabla.

<td width="100%" colspan="3" height="34">Fila combinada</td>

Para ilustrar mejor el uso de combinación de celdas, a continuación se muestra la siguiente tabla.

Combinación de celdas

El código para obtener una tabla con este aspecto se muestra a continuación.

<html>

<head><title>Mi tabla combinada</title></head>

<body>

 

<table Border=1 width=100%>

 

<tr>

<td width="100%" colspan="4">Primera fila combinada</td>

</tr>

 

<tr>

<td width="25%">Columna 1</td>

<td width="25%">Columna 2</td>

<td width="25%">Columna 3</td>

<td width="25%">Columna 4</td>

</tr>

 

</table>

</body>

</html>

La expresión ColSpan indica cuántas columnas se van a combinar, en este indican cuatro columnas. Si se desean combinar filas se debe utilizar la expresión RowSpan. Por ejemplo RowSpan="4" indica que se van a combinar 4 filas.

La siguiente tabla muestra un ejemplo de combinación de columnas y filas.

Combinación de celdas

El código para esta tabla es el siguiente:

<html>

<head>

<title>Pagina nueva 1</title>

</head>

<body>

<table border="1" width="100%">

  <tr>

    <td width="100%" colspan="4">Fila combinada</td>

  </tr>

  <tr>

    <td width="25%" rowspan="4">Área RowSpan</td>

    <td width="25%">Celda 1</td>

    <td width="25%">Celda 2</td>

    <td width="25%">Celda 3</td>

  </tr>

  <tr>

    <td width="25%">Celda 4</td>

    <td width="25%">Celda 5</td>

    <td width="25%">Celda 6</td>

  </tr>

  <tr>

    <td width="25%">Celda 7</td>

    <td width="25%">Celda 8</td>

    <td width="25%">Celda 9</td>

  </tr>

  <tr>

    <td width="25%">Celda 10</td>

    <td width="25%">Celda 11</td>

    <td width="25%">Celda 12</td>

  </tr>

</table>

</body>

 

</html>

Ejercicio

Con los conocimientos adquiridos acerca del uso de tablas, combinación de celdas y temas anteriores como viñetas, inserción de imágenes y películas, diseña la página que se muestra a continuación.

Combinación de celdas

Capítulo siguiente - Marcos
Capítulo anterior - Control de celdas
Recibe nuestras novedades
Al presionar "Recibir" estás dándote de alta y aceptas las condiciones legales de mailxmail

Hay 102 opiniones. Opina sobre este curso.

Descarga el PDF gratis

Cursos similares a Manual HTML


Cursos Valoración Alumnos Vídeo
PHP y MySQL. Aplicaciones Web: programación (primera parte)
Programación de aplicaciones Web con PHP y MySQL. Con este curso aprenderás el funcionamiento de una Web Site, la programación en el cliente ... [02/12/08]
 4,83/5 2.402  
Redes y comunicaciones (segunda parte)
Este curso es la segunda parte de nuestro estudio técnico explicativo sobre redes y comunicaciones de transferencia de datos. Ahora podrás ampliar los conocimientos adqui... [27/08/08]
5/5 890  
Cómo redactar e-mails efectivos
Con este curso conocerá gratis los principios de una comunicación interna eficaz por medio del correo electrónico: el modo de empezarlo, de ordenarlo, y de responder de u... [22/05/02]
 4,15/5 50.311  


Publicar en   del.icio.us    digg    meneame

¿Qué es mailxmail.com?|ISSN: 1699-4914|Recomiéndanos|Ayuda
Condiciones legales de mailxmail