Web Maestro - 10.-Tablas

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.

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

Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:

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

Que resulta:

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

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

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

Titular de la tabla

Se puede añadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla que indica cuál es su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>.

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

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

Ejemplo de filas desiguales
fila1-celda1	fila1-celda2	fila1-celda3
fila2-celda1	fila2-celda2

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:

<TABLE BORDER=número deseado>
Si en el ejemplo anterior ponemos:
<TABLE BORDER=5>
Resultará:

Ejemplo de filas desiguales
fila1-celda1	fila1-celda2	fila1-celda3
fila2-celda1	fila2-celda2

Celdas de cabecera

Además de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado.

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:

Ejemplo de filas desiguales
Columna 1	Columna 2	Columna 3
fila1-celda1	fila1-celda2	fila1-celda3
fila2-celda1	fila2-celda2

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

Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier 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.

Ejemplo con una imagen:

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

Ejemplo con un enlace:

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

Página principal

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> Cabecera a la izquierda </TH>(Recuérdese que por defecto están centradas)

Cabecera a la izquierda
Ejemplos de alineamiento horizontal dentro de la celda
Al centro
A la derecha

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

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 en el último ejemplo ponemos:

<TABLE WIDTH=60%>

Arriba

Abajo

O, si en ese mismo ejemplo, ponemos:

<TABLE HEIGHT=200>

Arriba

Abajo

Celdas que abarcan a otras varias

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiéndo 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 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>

Celda sobre 2 columnas
fila1-celda1	fila1-celda2	fila1-celda3
fila2-celda1	fila2-celda2	fila2-celda3

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>

Celda junto a 2 filas	fila1-celda1	fila1-celda2	fila1-celda3
Celda junto a 2 filas	fila2-celda1	fila2-celda2	fila2-celda3

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:

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

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.

Por ejemplo, si ponemos:

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

Obtenemos:

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

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

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

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:

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

Con lo que se obtiene:

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

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>

Con lo que se obtiene:

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

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:

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

Con lo que se obtiene:

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

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>
(Se omite el resto de las etiquetas de la tabla)

Con lo que se obtiene:

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

Ejemplo práctico

Partiendo del ejemplo práctico del capítulo anterior, mipag9.html, vamos a crear una tabla de dos filas, con una celda cada una. La primera, como cabecera, con el texto "Un lugar ideal para mis vacaciones", y la segunda con la imagen isla.gif. Además vamos a alargar a lo ancho la tabla al 75% de la pantalla.
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> mipag10.html y lo cargamos en el navegador para verlo.
Resultado.

Guardamos este fichero como