![Page 1: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/1.jpg)
Tablas
Formularios
Frames
![Page 2: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/2.jpg)
Una tabla nos permite organizar y distribuir los espacios de la página de la manera más optima. Nos puede ayudar a : generar texto en columnas como los periódicos
prefijar los tamaños ocupados por distintas secciones de la página
poner de una manera sencilla un pie de foto a una imagen.
Las tablas son definidas por las etiquetas <table> y </table>
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla.
![Page 3: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/3.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 3
<html>
<head> <title>Uso de Tabla</title> </head>
<table> <tr> <td>Celda 1, linea 1</td> <td> Celda 2, linea 1</td> </tr> <tr> <td> Celda 1, linea 2</td> <td> Celda 2, linea 2</td> </tr> </table>
</html>
Ejemplo. (tabla.html)
![Page 4: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/4.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 4
Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para, de esta forma, dar formato a su contenido.
Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
Las etiquetas de fuera de la celda no son tomadas en cuenta por ésta.
Observaciones.
![Page 5: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/5.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 5
align: Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
valign: Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.
bgcolor: Da color a la celda o línea elegida.
bordercolor: Define el color del borde
Atributos para líneas de la tabla.
![Page 6: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/6.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 6
Background: Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
Height: Define la altura de la celda en píxeles o
porcentaje. width: Define la anchura de la celda en píxeles o
porcentaje. Colspan: Expande una celda horizontalmente. Rowspan: Expande una celda verticalmente.
Atributos para celdas de la tabla.
![Page 7: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/7.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 7
Estos cuatro últimos atributos son de gran utilidad. Concretamente, height y width nos ayudan a definir las dimensiones de nuestras celdas.
◦ de una forma absoluta (en píxeles o puntos de pantalla)
<td width="80"> anchura de 80 píxeles
◦ de una forma relativa, es decir por porcentajes referidos al tamaño total de la tabla.
<td width="80%"> anchura de 80% de la anchura de la tabla.
Los atributos rowspan y colspan hacen posible expandir celdas fusionando éstas con sus vecinas. El valor que pueden tomar estas etiquetas es numérico. El número indica la cantidad de celdas fusionadas.
![Page 8: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/8.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 8
<table width="500" align="center" border="1">
<tr bgcolor="TEAL" align="center">
<td >Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr valign=“middle height=“70”>
<td align=“center” >Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
![Page 9: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/9.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 9
Ejemplo.
Fusiona la celda en cuestión con su vecina derecha.
<table width="500" align="center" border="1">
<tr bgcolor="TEAL" align="center">
<td colspan="2" >Celda 1, linea 1</td>
</tr>
<tr valign="middle" height="70">
<td align="center">hola </td>
<td> Celda 2, linea 2</td>
</tr>
</table>
![Page 10: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/10.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 10
Ejemplo.
Fusiona la celda en cuestión con su vecina derecha.
<table width="500" align="center" border="1">
<tr bgcolor="TEAL" align="center">
<td rowspan="2" >Celda 1, linea 1</td>
<td >Celda 2, linea 1</td>
</tr>
<tr valign="middle" height="70">
<td> Celda 2, linea 2</td>
</tr>
</table>
![Page 11: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/11.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 11
Atributos de la tabla.
Atributo Descripción.
align Alinea horizontalmente la tabla con respecto a su entorno.
background Permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor Da color de fondo a la tabla.
border Define el número de píxeles del borde principal.
bordercolor Define el color del borde.
cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing Define el espacio entre los bordes (en píxeles).
height Define la altura de la tabla en píxeles o porcentajes.
width Define la anchura de la tabla en píxeles o porcentajes.
![Page 12: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/12.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 12
<html>
<head> <title>Uso de Tabla</title> </head>
<body bgcolor="Silver">
<table cellpadding="15" cellspacing="3" border="1" bordercolor="blue" align="center">
<tr bgcolor="white"><td>
<font color="orange"> Tabla que contiene solo un renglon y una columna con bordes</font>
</td>
</tr>
</table>
<html>
![Page 13: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/13.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 13
Hacer código para generar la siguiente tabla.
Taller .
![Page 14: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/14.jpg)
La anidación de tablas es muy útil, y se puede hacer definiendo una tabla en una celda.
<table cellspacing="10" cellpadding="10" border="3">
<tr> <td align="center"> Celda de la tabla principal </td> <td align="center"> <table cellspacing=“3" cellpadding=“1" border="1"> <tr> <td>Tabla anidada, fila 1, columna 1</td> <td>Tabla anidada, fila 1, columna 2 </td> </tr> <tr> <td>Tabla anidada, fila 2, columna 1 </td> <td>Tabla anidada, fila 2, columna 2 </td> </tr> </table> </td> </tr> </table>
![Page 15: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/15.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 15
Taller (Extra)
Hacer código para generar la siguiente tabla con anidación.
Tabla con anidación
2
5
7
3 8
4 9
1 6
![Page 16: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/16.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 16
Solución (Tablas Anidadas)
![Page 17: Tablas Formularios Frames · 2014-09-18 · cellpadding Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre](https://reader036.vdocuments.pub/reader036/viewer/2022062505/5ede1cc8ad6a402d66696662/html5/thumbnails/17.jpg)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 17
Ejercicio (Resolver con colspan y rowspan)
colspan=“3”
rowspan=“2”