Guia y Documentacion HTML: Tablas
Guía y Documentación HTML: Tablas

Una de las funciones mas interesantes, a la hora de siturar elementos en nuestra página es el uso de las Tablas.
Hay muchas cosas que sin tablas no se podrían hacer.Observe la siguiente maquetación:
Tebas, en el lejano sur jamás fue dominada de manera perdurable por los invasores. Sus reyes solían pagar los tributos, y a veces eran expulsados durante cierto tiempo, pero, en su totalidad, el Alto Egipto consiguió mantener su caracter autonómico y ser gobernado por una dinatía egipcia. La historia de esta dinastía es oscura, los historiadores no han averiguado aún si todos los que tuvieron poder sobre Tebas durante ese periodo deben de atribuirse a una sóla línea dinástica, la XVII, o a dos. No obstante, la evolución general de los acontecimientos es clara: apoyándose en Nubia, que tenían la retaguardía, combatieron a veces a los hicsos y otras sometiendose por un tiempo a ellos
Este es el código utilizado:
<table border=1> <tr><td width=350 align=right valign=top><img src=/tutoriales/manuales/htmldocs/tutankamon_min.jpg hspace=5></td> <td width=250><font size=1>Tebas, en el lejano sur jamás fue dominada ( ... texto ... ) sometiendose por un tiempo a ellos </font></td> </tr></table>
Las funciones utilizando los códigos <TABLE> pueden ser anidados, esto es situar una tabla dentro de otra.
Podemos definir las columnas y las lineas que queramos, asignandole unos anchos, fijos o variables, color , posicionamiento de su contenido, etc.
Veamos a continuación la sintaxis de estos códigos:

<TABLE> Indica que abrimos una tabla
Su sintaxis es: 
<TABLE width=400 cols=50,20%,* rows=20,* border=1>
Hemos creado una tabla compuesta por 3 columnas y 2 lineas, con un borde de ancho 1 pixel, el ancho de la tabla es de 400 pixels.
La distribución de las columnas es, una primera de 50 pixels de ancho, una segunda columna de un 20% del tamaño de la ventana del navegador, y el resto libre en la ventana asignado a la tercera columna.
La distribución de las lineas de 20 pixels para la primera linea y el resto para la segunda linea.
Pulse aqui para ver el resultado.

<TR>Indica que insertamos una línea en la tabla
<TD>Indica que insertamos una columna en la tabla

La sintaxis de es :
<TR high=50 align=center valign=top rowspan=1 colspan=1 bgcolor=FFFFFF>
align se refiere a la alineacion en horizontal que tomaran los objetos que situemos dentro de este espacio de la tabla.
Puede tomar los valores left, center, right
valign se refiere a la alineación vertical de los objetos insertados en este espacio de la tabla.
Puede tomar los valores top,bottom, middle

rowspan se refiere al alargamiento que puede tener esta celula o espacio de la tabla en el sentido de las columnas.
Supongamos que tiene una tabla en la forma:
y que desea introducir los objetos en la apariencia siguiente:
Observe que la máscara debe de ocupar las casillas 1 y 3 para el mismo objeto. Esto es la casilla 1 debe de ser "alargada" verticalmente una celula o línea.
Esto se consige situando el código <ROWSPAN=2> en nuestro <TD>
El número 2 indica que se alarga hasta la línea 2.
El código completo queda entonces de la siguiente forma:
<TD ROWSPAN=2>
colspan se refiete al alargamiento que puede tener la celula en el sentido de las columnas. Su funcionamiento es identico a ROWSPAN.

bgcolor Se refiere a "background" color, o color de fondo.
Normalmente trabajaremos los colores en la forma RRGGBB, que se traduce así:
Los colores se determinan por sus componentes RGB ( Rojo, verde y azul ). Si encendemos por completo los tres valores R, G y B, entonces el color será el blanco. Por el contrario, si ponemos R, G y B a cero, el color será el negro.
Los valores posibles para cada color base, esto es para R, G y B son de 0 a 255, pero expresados mediante sólo 2 dígitos en hexadecimal, por lo que el valor mínimo será 00 y el máximo FF.
Si un color lo llamamos como color 00FF00, nos dirá que la componente R, será 0, o sea no tiene componente R (roja), el valor G será FF (el máximo para el verde) y la componente B estará a 0.
Naturalmente hemos representado el color VERDE con los valores 00FF00.
Como cada uno de los componentes primarios admite 255 valores diferentes, tendremos que de esta forma disponemos de 255 R * 255 G * 255 B = 16,581,375 colores.

Deberemos por fin, cerrar la tabla con </TABLE>.

Aqui tiene un ejemplo más de una tabla sencilla:
<html>
<head></head>
<body bgcolor=FFFFFF>

<table border=0>
<tr>
   <td bgcolor=FF0000><font color=FFFF00>COLOR</font></td>
   <td bgcolor=000000><font color=0000FF>COLOR</font></td>
   <td bgcolor=0FF00F><font color=EFFA00>COLOR</font></td>
</tr>

<tr>
   <td colspan=3 bgcolor=0000FF><font size=6 color=0000FF>
   COLOR</font></td>
</tr>
</table>

</body>             
<html>

Pulse aquí para ver el ejemplo.

Animo, ya ha avanzado mucho. La comprensión del funcionamiento de las tablas le será de gran ayuda al hacer sus propias maquetaciones. También le será muy util si desea crear páginas HTML con FRAMES, ya que las sintaxis son muy similares.
Necesitará tiempo para practicar, tome si desea los ejemplos dados, y vaya modificandolos y comprobando qué ocurre.
Si todo va mal ... quizá podamos ayudarle. Escribanos a support@interec.com