8.TABLAS

Las tablas son un modo sencillo de disponer el texto en columnas o de añadir un titular a una ilustración, pero hay más aplicaciones. La etiqueta <TABLE> puede ser una poderosa herramienta de formato. Se puede hacer uso de la etiqueta

<TABLE> para ubicar texto e imágenes con precisión, en prácticamente casi cualquier lugar de una página.

Estructura de una tabla

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

<TABLE>

[resto de las etiquetas]

</TABLE>

• Es la etiqueta general, que engloba a todas las demás.

[resto de las etiquetas]

</TABLE>

• Presenta los datos tabulados con un borde, haciendo las tablas más atractivas, y el grosor es de n pixeles.

<TR>

[etiquetas de las distintas celdas de la primera fila]

</TR>

• Permite formar cada fila de la tabla. Hay que repetirla tantas veces como filas queremos que tenga la tabla.

<TD>

[contenido de cada celda (imágenes, texto, etc.)]

</TD>

• Permite formar las celdas que contendrá cada fila. Hay que repetirlas tantas veces como celdas deba tener la fila.

<TH>

[encabezamiento de tabla]

</TH>

• Es utilizada para colocar encabezamientos en negrita sobre las columnas

Ejemplo

<HTML>

<HEAD>

<TITLE> Página de prueba para tablas </TITLE>

</HEAD>

<BODY>

<TR>

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

<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>

<BR> [Aquí van las etiquetas que visualizan la página]

</BODY>

</HTML>

Si el numero de celdas de una fila es distinto al de otra el navegador forma el número de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas.

Titular de tabla

Se puede añadir un titulo a la tabla, es decir un texto situado encima de la tabla que indica cuál es su contenido. Se consi- gue con la etiqueta <CAPTION> y </CAPTION>. Por ejemplo:

<CAPTION> Esta es mi primera tabla </CAPTION>

<CAPTION ALIGN="top">Título</CAPTION> Coloca el título sobre la tabla.

<CAPTION ALIGN="bottom">Título</CAPTION> Coloca el título bajo la tabla.

Contenido de las celdas

Solo se ha puesto hasta ahora en el ejemplo, texto normal dentro de las distintas celdas. Pero se puede poner en ellas cual- quier otro elemento de los que van en un documento HTML, como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc.

Ejemplos

a) Con una imagen

<TR>

</TR>

</TABLE>

b) Con un enlace

<TR>

<TD><A HREF="index.html"> Mi página principal </A></TD>

</TR>

</TABLE>

Posicionamiento del contenido dentro de la celda

Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:

<TD ALIGN="center"> Al centro </TD>

<TD ALIGN="right"> A la derecha </TD>

<TH ALIGN="left"> A la izquierda </TH>

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

<TD VALIGN="top"> Arriba </TD>

<TD VALIGN="bottom"> Abajo </TD>

Variando las dimensiones de la tabla

El navegador se encarga normalmente de dimensionar el tamaño total de la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc.

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 colocamos:

O, por ejemplo ponemos:

Celdas que abarcan a otras varias

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiendo dentro de la etiqueta de la celda los atributos COLSPAN="número" para extenderse sobre un número determinado de columnas, o ROWSPAN="número" para extenderse verticalmente sobre un número determinado de filas.

Por ejemplo, en la primera tabla del ejemplo anterior vamos a añadir una fila con una sola celda, que abarca a dos colum- nas:

<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 atri- buto BGCOLOR="#XXYYZZ", visto en dicho capítulo.

Se puede conseguir así:

[resto de las etiquetas]

</TABLE> La totalidad de la tabla tendrá un color de fondo.

[contenido de la celda]

</TD> Solo una celda tendrá color de fondo, distinto al resto.

Imágenes de fondo en las tablas

El Explorer de Microsoft soporta la colocación de imágenes de fondo en el interior de las tablas, de una manera análoga a como se hace en una página (según vimos en el capítulo 7).

Para ello debemos, utilizar el atributo BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg", visto en dicho capítulo.

Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de todas las celdas. (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.

Separación entre las celdas de una tabla

Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo

CELLSPACING, que se pone dentro de la etiqueta TABLE.

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

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:

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

Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.

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

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: