12.170 cursos gratis
8.769.879 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Manual HTML

Silvestre Goxcon Blas

Autor: Silvestre Goxcon Blas
Curso:
9,29/10 (104 opiniones) |74947 alumnos|Fecha publicaciýn: 25/11/2004

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

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratarý tus datos para realizar acciones promocionales (výa email y/o telýfono).
En la polýtica de privacidad conocerýs tu derechos y gestionarýs la baja.

Cursos similares a Manual HTML



  • Výdeo
  • Alumnos
  • Valoraciýn
  • Cursos
1. Manual de GMail
Google, la mayoría de las personas conocen a esta empresa, pero no todas saben que,... [27/11/06]
21.606  
2. HTML. Introducción práctica
HTML, este lenguaje para la creación de páginas Web o sitios de Internet, es la... [23/07/09]
4.600  
3. Cómo exportar una animación de Flash a HTML
En este curso de vídeo se enseña la manera de transportar o exportar animaciones... [29/06/12]
20
Curso con video

ýQuý es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail