tablas formularios frames · 2014-09-18 · cellpadding define, en píxeles, el espacio entre los...

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)



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.



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.



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.



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.



<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>


</tr>



Ejemplo.

Fusiona la celda en cuestión con su vecina derecha.



<td colspan="2" >Celda 1, linea 1</td>

</tr>

<tr valign="middle" height="70">

<td align="center">hola </td>


</tr>

</table>



Ejemplo.

Fusiona la celda en cuestión con su vecina derecha.



<td rowspan="2" >Celda 1, linea 1</td>

<td >Celda 2, linea 1</td>

</tr>

<tr valign="middle" height="70">


</tr>

</table>



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.



<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>



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>



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



Solución (Tablas Anidadas)



Ejercicio (Resolver con colspan y rowspan)

colspan=“3”

rowspan=“2”

tablas formularios frames · 2014-09-18 · cellpadding define, en píxeles, el espacio entre los...

Documents