10. Tablas

Hasta que no se empezaron a usar las tablas, la única manera de tabular las cosas era utilizar la etiqueta de preformateado, con la que es necesario poner manualmente los espacios en blanco para que quede todo alineado formando filas y columnas, con un resultado muy poco estético.

Estructura de una tabla

Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas.

1. La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:

   <TABLE>
   [resto de las etiquetas]
   </TABLE>

   Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para esto tenemos que añadir el atributo BORDER a la etiqueta, es decir:

   <TABLE BORDER>
   [resto de las etiquetas]
   </TABLE>

2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:

   <TR>
   [etiquetas de las distintas celdas de la primera fila]
   </TR>
   <TR>
   [etiquetas de las distintas celdas de la segunda fila]
   </TR>

3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.

<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>

Filas con desigual número de celdas

En este ejemplo hemos puesto dos filas con igual número de celdas. ¿Qué pasa si ese número es distinto? Pues el navegador forma el número de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas.

Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir si borramos <TD>fila2-celda3</TD>, resultará:

Titular de la tabla

Si en el ejemplo anterior añadimos la siguiente línea:

<CAPTION> Ejemplo de filas desiguales </CAPTION>, resulta:

Variando el espesor de los bordes

El atributo BORDER (visto más arriba) pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:

Celdas de cabecera

Esto se consigue con la etiqueta <TH> y </TH> (en vez de la normal <TD> y </TD>)

Vamos a añadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existían:

<TR>
<TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH>
</TR>

Que resulta:

Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en los bordes., encabezando las columnas o las filas.

Contenido de las celdas

Ejemplo con una imagen:

<TABLE BORDER=2>
<TR><TD><IMG SRC="babe.gif"></TD></TR>
</TABLE>

<TABLE BORDER=2>
<TR><TD><A HREF="index.html">Página principal </A></TD></TR>
</TABLE>

Posicionamiento del contenido dentro de la celda

<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH> (Recuérdese que por defecto están centradas)

El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atibutos:

<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>

Arriba

Abajo

Variando las dimensiones de la tabla

A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels.

Por ejemplo, si en el último ejemplo ponemos:

Arriba

Abajo

O, si en ese mismo ejemplo, ponemos:

Arriba

Abajo

Celdas que abarcan a otras varias

Por ejemplo, en la primera tabla de este capítulo vamos a añadir una fila con una sola celda, que abarca a dos columnas:

<TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR>

O, en la misma tabla, vamos a añadir una celda en la primera fila. pero que abarque también a la siguiente:

<TD ROWSPAN=2> Celda junto a 2 filas </TD>

Color de fondo en las tablas

Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente análogo al empleado para que una página tenga un color de fondo uniforme (según vimos en el capítulo 7). Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ", visto en dicho capítulo.

Se puede conseguir:

1. Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):

   <TABLE BORDER BGCOLOR="#00FF00">
   <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR>
   <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR>
   </TABLE>
   

   Que resulta:

   fila1-celda1	fila1-celda2
   fila2-celda1	fila2-celda2

2. Que sólamente una celda determinada tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1 tenga un color verde:

   <TABLE BORDER>
   <TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-celda2</TD></TR>
   <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR>
   </TABLE>
   

   Que resulta:

   fila1-celda1	fila1-celda2
   fila2-celda1	fila2-celda2

3. Que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El atributo del color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta de la celda en cuestión (una combinación de los dos casos anteriores). por ejemplo, vamos a hacer que la generalidad de la tabla sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00):

   <TABLE BORDER BGCOLOR="#FF0000">
   <TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-celda2</TD></TR>
   <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR>
   </TABLE>
   

   Que resulta:

   fila1-celda1	fila1-celda2
   fila2-celda1	fila2-celda2

Imágenes de fondo en las tablas

Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de todas las celdas.

Por ejemplo, si ponemos:

<TABLE BORDER BACKGROUND="nubes.jpg">
(Se omite el resto de las etiquetas de la tabla)

Obtenemos:

(Con el Netscape no se verá ninguna imagen de fondo, sólo con el Explorer)

Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>), entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo:

Separación entre las celdas de una tabla

Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos:

<TABLE BORDER CELLSPACING=20&GT;
(Se omite el resto de las etiquetas de la tabla)

Con lo que se obtiene:

A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los bordes. Pero para comprobar que no es así, hagamos que en el caso anterior, tenga además unos bordes de 5 de espesor:

<TABLE BORDER=5 CELLSPACING=20&GT;

Con lo que se obtiene:

Separación entre el borde y el contenido dentro de las celdas

Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda:

<TABLE BORDER CELLPADDING=20&GT;
(Se omite el resto de las etiquetas de la tabla)

Con lo que se obtiene:

Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior).

Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido con respecto a los bordes de las celdas de 20, lo obtendríamos con:

<TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20&GT;
(Se omite el resto de las etiquetas de la tabla)

Con lo que se obtiene:

Ejemplo práctico

Para ello sustituimos:

<H3> Un lugar ideal para mis vacaciones </H3>
<IMG SRC="isla.gif" ALT="isla">

Por lo siguiente:

<P> <TABLE BORDER=5 WIDTH=75%>
<TR> <TH> Un lugar ideal para mis vacaciones </TH> </TR>
<TR> <TD> <IMG SRC="isla.gif" ALT="isla"> </TD> </TR>
</TABLE>

Guardamos este fichero como mipag10.html y lo cargamos en el navegador para verlo.
Resultado.