Tutorial HTML

HTML

Introducción

Javascript

Sigueme en:

ArielAlexCo

ArielAlexCo.net

Galeria

MéXICO | Un Pais un Futuro

Sello Postal

Bibliote de la UAM-X

Unidad a partir de la...

Edificio de Biología

HTML
Introducción Código Básico Texto Imagenes	Links Frames Tables Javascript

Tables

Ahora bien los tables van dentro una una página HTML. y su código es similar al de frames pero con diferencia de que son secciones de una tabla. Su código simple es:

<TABLE>
<TD>
Aquí pon texto
</TD>
</TABLE>

Pero este es uno de los códigos más simples como uno de los más complicados y a veces se tiende a pasar por alto algún elemento. Básicamente lo que se tiene que hacer es, indicar que el "table" inicia y el tag de "td" es donde empieza y acaba un "cuadro" Ahora bien, veamos uno de 2x2 cuadros y mucho más específico.

cuadro1	cuadro2
cuadro3	cuadro4

<TABLE WIDTH=60% ALIGN=center BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TD WIDTH=60% HEIGHT=80 ALIGN=center> cuadro1 </TD>
<TD VALIGN="top">cuadro2 </TD>
<TR>
<TD BGCOLOR=gray VALIGN=bottom ALIGN=center> cuadro3</TD>
<TD HEIGHT=150 BACKGROUND=imagen.jpg ALIGN=right>cuadro4 </TD>
</TABLE>

       Ahora se complicó un poco más, pero aún así no está tan difícil de entender, en primera se está indicando que el table va a tener un border de 1, esta alineada al centro y tiene un tamaño de un 60% con relación a donde esta contenido, además el espacio entre sus cuadros (o celdas) es "0" y el espacio entre el borde de sus celdas y el contenido también es "0", estos últimos dos ayudan a que si quieres hacer que el contenido este unido como una imagen de rompecabezas, no veas espacios entre los cuadros.

       Por otro lado el cuadro uno mide 60% del 100% (que de hecho está al 60% de donde está contenido [¿dificil? luego lo entiendes]), tiene una altura de de 80 pixles, y lo que va adentro esta alineado al centro.

       El cuadro dos, toma el tamaño de altura de los que ya están especificados (el de la derecha y el de abajo) y lo que va adentro esta alineado en la parte de arriba del cuadro.

       El tercero tiene un fondo gris y asume las medidas de los cuadros que ya tienes especificados los tamaños. Lo que va adentro esta alineado tanto al centro horizontalmente como abajo verticalmente.

       El cuarto tiene un tamaño definido de 100 pixeles de altura y además de eso tiene una imagen de fondo, y lo que va adentro está alineado a la derecha.

       Ok, fíjate como unos tags son similares pero tiene diferente reacción, por ejemplo el de "align" si lo pones en el de table la alineación que le pongas sera la posición del <table> con relación al lugar que está. Si está en un <TD> es la alineación del contenido que tiene. el de width y height tiene un funcionamiento similar solo que en table indica el tamaño total de la misma, y en los TD indica el tamaño que ocupa de esa table.

       Tambien si le agrega los tag de colspan y rowspan a los TD puede llegar a hacer otras cosas que te pueden llegar a ser útiles, por ejemplo:

	COLSPAN=2
ROWSPAN=2	AA	AB
ROWSPAN=2	BA	BB

<TABLE WIDTH=90% ALIGN=center BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TD ALIGN=center> <IMG SRC=imagen.jpg> </TD>
<TD ALIGN=center colspan=2>COLSPAN=2 </TD>
<TR>
<TD ALIGN=center rowspan=2> ROWSPAN=2 </TD>
<TD ALIGN=center> AA </TD>
<TD ALIGN=center> AB </TD>
<TR>
<TD ALIGN=center> BA </TD>
<TD ALIGN=center> BB </TD>
</TABLE>

Ahora una explicación más resumida de cada uno de los tags. ¡ah! El de TR funciona paradar cambio de fila como un <br> muchos la usan con </tr> pero eso ocasiona que al final se vea un espacio que no existe hasta abajo del table. Prosigamos...

<TABLE>	Indica que lo que vas a iniciar un table.
...WIDTH / HEIGHT...	Al igual que las imágenes, indica el tamaño.
...ALIGN / VALIGN...	Indica la ilineacion el Valign indica la alineación vertical.
...BORDER...	Indica el tamaño del borde de la tabla.
...CELLSPACING...	Indica el espacio entre los cuadros/celdas.
...CELLPADDING...	Este indica el espacio entre el margen y el contenido de los cuadros.
<TD>	Indica que va iniciar un cuadro.
...BGCOLOR...	Indica el color de fondo, otra vez hexadecimalmente.
...BACKGROUND...	Pone una imagen de fondo ya sea en todo el table o solo en el TD.
...COLSPAN...	Este te dice cuantos cuados en vertical se va a expandir tu TD.
...ROWSPAN...	Este hace lo mismo que el colspan pero horizontalmente.
</TD>	Indica que se acabó un cuadro.
<TR>	Indica que se acabó una hilera del table
<TABLE>	Indica que se acabó el table.

Bueno, es el 11 de Junio del 2006 y porfín después de varios años al parecer... XDD jajaja pude concluir este tutorial que había empezado en el ya antiguo sitio de ÐRÂGØN-tech, por ahí del año 2001. Ahora que lo pienso... si me tardé mucho. jajaja. Gracias por su atención y paciencia.

JavaScript >