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:
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:
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.
<TABLE BORDER=2>
<TR><TD><A HREF="index.html">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>Centro</TD>
<TD ALIGN=RIGHT>Derecha</TD>
<TH ALIGN=LEFT>Izquierda</TH>
(Recuérdese que por defecto están centradas)
Ejemplos de alineamiento horizontal dentro de la celda:
Centro
Derecha
Izquierda
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:
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
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
Celda sobre 2 columnas
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
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):
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:
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):
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.
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:
<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
Partiendo del ejemplo práctico del capítulo anterior, mipag9.htm, 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.
