LECCION 6: TABLAS

En esta leccion hablaremos sobre las tablas, las cuales no solo se utilizan de forma visible como las que he utilizado para presentar el resumen de cada lección sino que también se utilizan en forma invisible, para ordenar los textos en bloques, presentar algunas partes del documento html con un color de fondo diferente, etc.

El tag que engloba todo tipo de tabla es: <TABLE> y </TABLE> al que siempre le agregaremos el atributo BORDER, este atributo tiene valor 1 por defecto (si no le ponemos nada) pero podemos variar el grosor del borde asignandole valores 2, 3, 4 etc. o 0 si queremos borde invisible.
Dentro de estos tags, agregaremos los tags para formar las filas (rows) que son: <TR> y <TR> y hay que repetirlas tantas veces como filas queremos que tenga la tabla.
Por ultimo dentro de los tags de filas, se insertan los tags de celdas que son <TD> y </TD> entre estos tags pondremos el contenido de cada celda (texto, links, graficos, etc.) las repetiremos tantas veces como celdas queremos que haya en esa fila.

Ejemplo práctico:

<TABLE BORDER="3">
<TR>
<TD><A HREF="http://www.yahoo.com">esta es la primera celda</A></TD> <TD>esta es la segunda celda</TD> <TD>esta es la tercera celda</TD>
</TR>
<TR>
<TD>primera celda segunda fila</TD> <TD>segunda celda segunda fila</TD> <TD><IMG SRC="dog.jpg"></TD>
</TR>
</TABLE>

Que se ve en pantalla:

esta es la primera celda	esta es la segunda celda	esta es la tercera celda
primera celda segunda fila	segunda celda segunda fila

Como se ve, el tamaño de las celdas se adapta al contenido de las mismas ya que el browser se encarga de ello, pero podemos forzar a la tabla a tener ciertas medidas, esto se logra agregando los parámetrosWIDTH y HEIGHT. Los valores pueden ser en pixeles o en porcentaje de pantalla.
Por ejemplo, si en la tabla anterior agrego:
<TABLE WIDTH=80%>
Resulta:

esta es la primera celda	esta es la segunda celda	esta es la tercera celda
primera celda segunda fila	segunda celda segunda fila

<TABLE HEIGHT="200">
Resulta:

esta es la primera celda	esta es la segunda celda	esta es la tercera celda
primera celda segunda fila	segunda celda segunda fila

Si queremos poner un color de fondo a una tabla utilizamos el mismo tag <BGCOLOR> que vimos para poner color de fondo a un documento html. Para que toda la tabla tenga el mismo color de fondo agregamos el tag al de <TABLE>, si en cambio queremos que una celda tenga un color determinado agregamos el tag al de <TD>

Por ejemplo:
<TABLE BORDER="2" BGCOLOR="#8EBFF4">
<TR>
<TD>Una celda </TD>
<TD>otra celda </TD>
</TR>
<TR>
<TD BGCOLOR="#FBE0BB">celda de otro color</TD>
<TD>otra celda</TD>

Resulta:

Por ultimo veamos una tabla con borde invisible:

<TABLE BORDER="0" BGCOLOR="#FBE0BB" WIDTH="80%"ALIGN="CENTER">
<TR><TD> <CENTER>Fin del curso basico de introduccion</CENTER></TD>
</TR></TABLE>

En este ultimo ejemplo como se vera tambien se agregó el parametro ALIGN con el valor CENTER, para centrar la tabla en la pantalla, este valor puede ser cambiado por LEFT o RIGHT.

Las posibilidades de las tablas no terminan aquí, pero como se dijo al principio este es un curso básico. Recomiendo una vez dominados estos conceptos básicos, profundizar en el tema con otros manuales.