Aprender a utilizar las tablas para la confección de una página de calidad es algo esencial ya que, como vamos a ver dentro de unos momentos, las tablas nos van a permitir no sólo realizar una maquetación más profesional de nuestra página WEB sino que, además, se van a convetir en un estupendo aliado para el trabajo con gráficos. Sin más, comenzamos el "avistamiento" a las tablas.

Lo que tenemos que tener claro

Antes de empezar a ver cómo podemos contruirnos nuestras propias tablas, tenemos que tener claro qué es una tabla para poder ver mejor sus ventajas a la hora de utilizarlas para maquetar nuestra página WEB.
Una tabla no es más que filas y columnas en donde, el cruce de cada fila y columna produce un hueco o espacio denominado celda. En dichas celdas, podremos meter información ya sea en forma de texto o gráfica constituyendo, así la unidad mínima de que se compone cualquier tabla, es decir, esto que teneís a continuación es una tabla.

Lo que estaís viendo, es el ejemplo más "brusco" de tabla que se puede construir ya que, ni siquiera están definidos los atributos del texto que se encuentran dentro de nuestra tabla sin embargo, los más imaginativos de vosotros, habreís observado, que las posibilidades que nos brinda una tabla son enormes ya que podremos presentar nuestra información ordenada como queramos, situándola en las celdas que estimemos oportunas dependiendo de en que fila o columna queremos mostrar la información.

Como veremos a continuación, podremos construirnos una tabla con la sencilla directiva <TABLE>, la cual, se podrá combinar con todas las directivas ya vistas para poder ofrecer todas las posibilidades que hemos aprendido pero dentro de una tabla perfectamente ordenada y sincronizada con la información que queremos representar.

Aprendiendo a utilizar la directiva <TABLE>

Ya se ha indicado en el párrafo de más arriba que, para poder construir una tabla tan sólo hay que utilizar la directiva <TABLE>, la cual, lógicamente, deberá de llevar su correspondiente </TABLE> para indicar al navegador dónde acaba la tabla que estamos definiendo. A su vez, dentro de la directiva <TABLE>, deberemos de saber utilizar dos directivas más, una de ellas se encargará de definir las columnas de una fila y la otra hara lo propio con las filas creando una nueva cuando sea invocada, así, si utilizamos la directiva <TD> con su correspondiente </TD>, poniendo información dentro, ya tendremos definida una celda o columna de la fila correspondiente de nuestra tabla mientras que, si ponemos la directiva <TR> ordenaremos al intérprete de nuestro navegador, que cree una nueva fila. Decir, que para la directiva <TR> no hay que añadir, como cabría esperar, </TR> ya que no hace falta, se pone si más y se crea la nueva fila.

Cómo lo mejor es un ejemplo, he decidido poneros el código necesario para crear la tabla que os ofrecí más arriba, ahí va:

<CENTER><TABLE border="2">
<TD>Fila 1 Columna 1</TD>
<TD>Fila 1 Columna 2</TD>
<TR>
<TD>Fila 2 Columna 1</TD>
<TD>Fila 2 Columna 2</TD>
<TR>
<TD>Fila 3 Columna 1</TD>
<TD>Fila 3 Columna 2</TD>
</TABLE>/CENTER>

Todo lo que podeís ver está explicado, utilizamos la directiva <CENTER> para centrar la tabla en pantalla, aprovechándonos, de que podemos combinar sin ningún tipo de problema las directivas que vamos conociendo.

Si os fijaís un poco en el ejemplo, vereis que la directiva <TABLE> va acompañada de un atributo llamado border, es decir, lo que tenemos es <TABLE border="2">. Bien, nos encontramos con un claro ejemplo de atributos añadidos a directivas (como era el caso del atributo align que añadíamos a la directiva <P> por poner un ejemplo). Con el atributo border="número", conseguimos que nuestras tablas sean capaces de mostrar un borde para que, el lector, pueda diferenciar las filas y columnas de nuestra tabla perfectamente. Habrá ocasiones en las que deseemos mantener invisibles los bordes de nuestras tablas (un caso sería el de la maquetación de un texto en columnas), para ello sólo tendremos que eliminar el atributo border de la directiva <TABLE> y las líneas divisorias desaparecerán.
El atributo border, podrá estar igualado al valor de grosor que nosotros queramos dar a nuestra tabla, cuanto más valor, más grosor tendrá. En el caso de poner border sin nada más, la tabla se creará con un borde simple.

A continuación, os voy a poner la tabla que estamos utilizando pero sin la directiva border para que veais el efecto que produce ver una tabla sin bordes.

Las directivas <CAPTION> y <TH>

Pese a que no requieran excesivos esfuerzos para su implementación, he decidido ponéroslas a parte, para que así, no veaís todo "tan de golpe". Con este par de directivas, podremos poner títulos a la tabla y a las columnas.

El título a la tabla que estemos creando, se insertará con la directiva <CAPTION> y su correspondiente </CAPTION> justo después de haber comenzado a definir la tabla, esto es, justo después de haber definido la directiva <TABLE>.
Lógicamente, entre la directiva <CAPTION> tendrá que ir la información que nosotros queramos que sea el título de nuestra tabla.

Por otro lado, podremos dar título a cada columna de nuestra tabla para ello, deberemos de poner el título correspondiente a cada una de las columnas con la directiva <TH> y su correspondiente </TH>, es decir, habrá que poner tantas directivas <TH> y </TH>, como columnas existan en nuestra tabla y el título, deberá de ir, lógicamente, entre dichas directivas, también, es importante añadir que, despues de poner todas las directivas <TH>, deberemos de poner una <TR> para empezar a trabajar, en serio, con nuestra tabla.

Así, para crear una tabla como esta:

Habría que poner el código siguiente:

<CENTER><TABLE border>
<CAPTION>Colabora con Macedonia Magazine</CAPTION>
<TH>Datos de la columna 1</TH>
<TH>Datos de la columna 2</TH>
<TD>Fila 1 Columna 1</TD>
<TD>Fila 1 Columna 2</TD>
<TR>
<TD>Fila 2 Columna 1</TD>
<TD>Fila 2 Columna 2</TD>
<TR>
<TD>Fila 3 Columna 1</TD>
<TD>Fila 3 Columna 2</TD>
</TABLE>/CENTER>

Pero... ¿Cómo controlo la información?

Seguro que os habreís preguntado cómo poder hacer para que vuestra información, salga de un color determinado en la tabla o tenga un tamaño determinado, etc. La respuesta es bien fácil ¡Cómo siempre!. Sí, tan sólo tenemos que aplicar todo lo que sabemos para formatear nuestro texto correctamente, pero dentro de una celda, ya sea la de definición del título de la tabla, de las columnas o de las propias celdas. Es bien fácil, pero más trabajoso e indispensable.

De esta forma, si quisiesemos que la tabla del ejemplo anterior saliese mucho más "profesional" y acorde con el tamaño de letra que estamos utilizando, esto es, así:

Tan sólo tendríamos que poner el código siguiente:

<CENTER><TABLE border>
<CAPTION>
<FONT color="#FF0000" size="3" face="arial">
Colabora con Macedonia Magazine </FONT>
</CAPTION>

<TH>
<FONT color="#00FFFF" size="2" face="arial">
Datos de la columna 1</FONT>
</TH>
<TH>
<FONT color="#00FFFF" size="2" face="arial">
Datos de la columna 2</FONT>
</TH>

<TD>
<FONT color="#000000" size="2" face="arial">
Fila 1 Columna 1
</FONT>
</TD>
<TD>
<FONT color="#000000" size="2" face="arial">
Fila 1 Columna 2
</FONT>
</TD>

<TR>

<TD>
<FONT color="#000000" size="2" face="arial">
Fila 2 Columna 1
</FONT>
</TD>
<TD>
<FONT color="#000000" size="2" face="arial">
Fila 2 Columna 2
</FONT>
</TD>

<TR>

<TD>
<FONT color="#000000" size="2" face="arial">
Fila 3 Columna 1
</FONT>
</TD>
<TD>
<FONT color="#000000" size="2" face="arial">
Fila 3 Columna 2
</FONT>
</TD>

</TABLE>/CENTER>

Como podeís observar, no es nada del otro mundo, es sólo combinar todo lo que hemos aprendido para realizar una salida de textos "digna" pero poniéndolo dentro de la tabla. ¡Por cierto!, acordaos de cerrar la directiva <P> justo al comenzar la contrucción de una tabla y de volver a abrirla cuando acabeís de definirla sino quereís que, el texto que venga después de definir a nuestra tabla, se vaya a cazar champiñones ;-).

Consideraciones finales

La construcción de una tabla, es mucho más deseada según avanzamos en el diseño de nuestra página WEB. Para ello, disponemos de muchos más secretos y atributos que añadir a la directiva <TABLE> que nosotros hemos puesto aquí pero eso, os tocara a vostros investigar por la multitud de tutoriales que existen en la red. Lo básico ya lo habeís aprendido y con la práctica, aprendereís a dominar la localización de vuestras tablas.

Hay multitud de utilidades que dar a las tablas, podemos añadir enlaces dentro de sus celdas ofreciéndolos de un modo ordenado (tan sólo teneís que aplicar lo que vimos en el capítulo 5 a las celdas de vuestras tablas), colocar gráficos perfectamente maquetados, como veremos en el capítulo siguiente, realizar presentaciones de nuestros texto en forma de columnas, como si se tratase de un periódico, ofrecer catálogos, etc, etc. Tan sólo teneís que poner a prueba vuestra imaginación de diseñador y utilizar las tablas, y probar los atributos que ya hemos estudiado junto a la directiva <TABLE>... ¿qué pasaría si pusiera <TABLE align="left">?. ¡Probadlo!