3RD55 的个人资料█ GRACIAS POR TU VISITA ...照片日志列表更多 工具 帮助

Tablas y mÁs cosas en HTML para poner en el blog

 

<B> ... </B>

Pone el texto en negrita.      Soy un texto negro
<I> ... </I> Representa el texto en cursiva.     Estoy en cursiva
<U> ... </U> Para subrayar Como soy muy importante estoy subrayado
<S> ... </S> Para tachar. A mí, en cambio, nadie me quiere jajaja
<TT> ... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL> ... </SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
 
 

 
 
                            TABLAS Y BORDES                            

 

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="IMAGEN">
prueba </TD>

<TD WIDTH=100 BACKGROUND="IMAGEN">
prueba </TD>

<TD WIDTH=100 BACKGROUND="IMAGEN">
prueba </TD>

</TABLE>

 

 

 
prueba prueba                              prueba

 

Puedes hacer infinidad de cosas, también puedes hacer tablas mucho más llmativas y complejas, para eso puedes ayudarte con el programa de microsoft ForntPage que traé office

评论 (5)

请稍候...
很抱歉,您输入的评论太长。请缩短您的评论。
您没有输入任何内容,请重试。
很抱歉,我们当前无法添加您的评论。请稍后重试。
若要添加评论,需要您的家长授予您相应权限。请求权限
您的家长禁用了评论功能。
很抱歉,我们当前无法删除您的评论。请稍后重试。
您已超过了一天之内允许提供的评论数上限。请在 24 小时后重试。
因为我们的系统表明您可能在向其他用户提供垃圾评论,您的帐户已禁用了评论功能。如果您认为我们错误地禁用了您的帐户,请联系 Windows Live 支持部门
完成下面的安全检查,您提供评论的过程才能完成。
您在安全检查中键入的字符必须与图片或音频中的字符一致。

若要添加评论,请使用您的 Windows Live ID 登录(如果您使用过 Hotmail、Messenger 或 Xbox LIVE,您就拥有 Windows Live ID)。登录


还没有 Windows Live ID 吗?请注册

silvy发表:
  genial tu espacio, me ha servido de mucho MUCHAS GRACIAS
5 月 22 日
匿名 的图片
☆슷chOkOlAtEpUnK슷☆ 发表:
mmm me quedo sin palabras esta chido tu space ok
y ademas tiene buenas sugerencias
12 月 11 日
匿名 的图片
Jenyswat 发表:
OK! me han servido de mucho tus explicaciones, porque apenas lei como poner un reproductor de musica(el WMP) y ya lo puse, pero me dicen mis contactos que no logran escuchar la musica, lo extraño es que yo entro a mi space y si logro escucharla. Tendras alguna idea a que se debe??
10 月 24 日
匿名 的图片
Sephiroth 发表:
por sierto si puedes luego me dices como poner ese contador de visitantes eee =)
6 月 29 日
匿名 的图片
Sephiroth 发表:
jjajajaja chistoso tu space , aunque le faltan cosas pero me hise reir con eso de si no te gusta pues q mas da jajajaja buena pero hojala le metas mas cosas.
6 月 29 日

引用通告

此日志的引用通告 URL 是:
http://3rd55.spaces.live.com/blog/cns!8F2458B7524CC068!335.trak
引用此项的网络日志