Post on 02-Jun-2020
Tablas
Formularios
Frames
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.
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)
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.
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.
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.
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.
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>
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>
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>
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.
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>
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 13
Hacer código para generar la siguiente tabla.
Taller .
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>
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
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 16
Solución (Tablas Anidadas)
Lorna V. Rosas Téllez.
Diseños de Sitios Web. 17
Ejercicio (Resolver con colspan y rowspan)
colspan=“3”
rowspan=“2”