4,65/5
(102 opiniones)
|26848 alumnos|Fecha publicación: 25/11/2004
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.
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.
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>
EjercicioCon 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.
Hay 102 opiniones. Opina sobre este curso.
| 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] |
|
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] |
|
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] |
|
50.311 | ||
Publicar en
del.icio.us
digg
meneame