HTMLpointHTMLpoint HTMLpoint.com


 <TABLE> gestionar tablas



La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página:

<TABLE WIDTH=500>
</TABLE>


En este ejemplo de código, la anchura de la tabla está expresada en píxel (500). Si se elige esta opción, sea cual sea la resolución con la que venga vista la página, la medida de la tabla no sufrirá variaciones, es decir, en nuestro caso será siempre de 500 píxel.
No sucederá lo mismo, sin embargo, si decidimos expresar el tamaño mediante un porcentaje:

<TABLE WIDTH=50%>
</TABLE>


En este caso, la anchura de la tabla será distinta según sea la resolución del vídeo del usuario.
Así, por ejemplo, quien tenga un vídeo con resolución 640x480 verá una tabla de unos 320 píxel (porque hemos impostado un ancho de tabla equivalente al 50% de la página), mientras quien tenga un vídeo con resolución 800x600 verá una tabla de 400 píxel.
En nuestra opinión, es preferible mantener el control absoluto sobre la dimensión de la tabla utilizando, por tanto, la medición en píxel y no en tanto por ciento.

Ahora echemos un vistazo a la manera en que debe estructurarse una tabla. Para ello utilizaremos algunas imágenes:



Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla.
He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:

<TABLE BORDER=1 WIDTH=300>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

</TABLE>


prueba prueba prueba


En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo:



Como podemos observar, hemos introducido una nueva marca <TR>, que es una especie de "salto" de fila dentro de la tabla. He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:

<TABLE BORDER=1 WIDTH=300>

<TR>
<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>
</TR>

<TR>
<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>
</TR>

</TABLE>


prueba prueba prueba
prueba prueba prueba


El espacio entre los diversos campos de una tabla se define dentro de la marca </TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en píxel):

<TABLE CELLPADDING=10 CELLSPACING=10>
</TABLE>


La colocación del texto y de las imágenes dentro de los distintos campos <TD> de la tabla puede ser modificada de varias maneras:

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 VALIGN=TOP>
prueba </TD>

<TD WIDTH=100 VALIGN=BOTTOM>
prueba </TD>

<TD WIDTH=100 VALIGN=MIDDLE>
prueba </TD>

</TABLE>
prueba prueba prueba





<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 ALIGN=RIGHT>
prueba </TD>

<TD WIDTH=100 ALIGN=CENTER>
prueba </TD>

<TD WIDTH=100 ALIGN=LEFT>
prueba </TD>

</TABLE>
prueba prueba prueba





Cada campo puede tener un color de fondo distinto de los otros e, incluso, un fondo como los de las páginas web normales (los fondos pueden ser sustituidos con GIF animadas):


<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 BGCOLOR="red">
prueba </TD>

<TD WIDTH=100 BGCOLOR="yellow">
prueba </TD>

<TD WIDTH=100 BGCOLOR="gray">
prueba </TD>

</TABLE>
prueba prueba prueba





<TABLE WIDTH=300 HEIGHT=230>

<TD width=100 BACKGROUND="sfondo15.jpg">
prueba </TD>

<TD WIDTH=100 BACKGROUND="sfondo26.jpg">
prueba </TD>

<TD WIDTH=100 BACKGROUND="sfondo61.jpg">
prueba </TD>

</TABLE>
prueba prueba prueba



  Torna a inizio pagina