8. Práctica 3 - Tabla de Datos.
La primera de las prácticas consistirá en la creación de una tabla de datos. Será más complicada que los ejemplos vistos hasta ahora y se parecerá más a lo que necesitaremos en el mundo real.
Nuestro objetivo será crear la tabla de la figura 6.22, pero vayamos paso por paso.
Antes de empezar será útil desglosar la tabla objetivo en sus columnas y filas. Esto nos será de gran ayuda según vayamos creándola y nos permitirá hacernos una idea inicial de la estructura de código que necesitamos. En la figura 6.23 podemos ver como hemos realizado este desglose, en este caso vemos que será necesaria una tabla de 5 filas y 5 columnas, existiendo celdas que se extienden varias columnas (COLSPAN) y otras que se extienden varias filas (ROWSPAN). Debemos recordar en este momento que las celdas que se expanden deben ser definidas (con TD o TH) en la primera de las filas y/o primera de las columnas que ocupan.
Figura 6.22. Nuestro objetivo en esta práctica 3 será realizar esta tabla. Para su realización necesitaremos usar gran parte de los atributos que hemos aprendido.
Figura 6.23. Una vez que sabemos como queremos que quede la tabla es muy útil desglosarla en columnas y filas para no liarnos al escribir el código.
Vamos allá con la creación de la tabla, para seguir mejor el proceso recomendamos al lector que se ponga de su editor de texto o editor de HTML favorito y vaya escribiendo el código.
8.1. Paso 1.
En primer lugar crearemos la estructura básica de la página y de la tabla, incluyendo, de paso, el titulo de ésta con la etiqueta CAPTION:
<HTML>
<HEAD>
<TITLE>Practica 3</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION>SuperOFERTA viaje a Nueva Zelanda</CAPTION>
... Aquí iremos insertando el resto del código ...
</TABLE>
</BODY>
</HTML>
|
8.2. Paso 2.
A continuación vamos a crear la primera de las filas. La primera de las celdas, que estará vacía ocupa dos filas y dos columnas. El código para definirla debemos ponerlo en la celda de la primera columna de la primera fila, y será:
<TR><TH ROWSPAN=2 COLSPAN=2></TH>
|
A continuación sigue una celda que ocupa 2 columnas y otra que ocupa dos filas. En definitiva el código necesario para crear la primera fila será:
<TR>
<TH ROWSPAN=2 COLSPAN=2></TH>
<TH COLSPAN=2>Hoteles 3 estrellas</TH>
<TH ROWSPAN=2>Hoteles 4 estrellas</TH>
</TR>
|
8.3. Paso 3.
Ahora crearemos la segunda de las filas, esta no es la que comienza con la celda "1 semana", sino la anterior porque la primera celda en la fila anterior se extendió dos filas. En este caso sólo debemos escribir el código de dos celdas, ya que el resto son celdas que comenzaron en la primera fila y se expanden a esta segunda. No será necesario definir esas celdas, ni siquiera para dejarlas vacías, simplemente hay que ser consciente del espacio que ocuparán. Teniendo esto en cuenta el código usado será:
<TR>
<TH>Sólo alojamiento</TH>
<TH>Pensión completa</TH>
</TR>
|
Es posible que resulte un poco difícil ver que de sólo con este código las dos únicas celdas que hemos insertado se colocarán en la tercera y cuarta columna, pero recordemos las dos primeras ya están ocupadas por la primera celda de la primera fila. Este es un buen momento para probar con un navegador lo que hemos hecho hasta ahora. Guardemos el código y abramos el archivo HTML con un navegador. En la figura 6.24 podemos ver la tabla tal y como la muestra Internet Explorer.
8.4. Paso 4.
Siguiente fila. La primera celda y la última se expanden 2 filas, por lo que usaremos el atributo ROWSPAN=2 en ellas:
<TR>
<TH ROWSPAN="2">1 semana</TH>
<TH>Avión turista</TH>
<TD>700 USD</TD>
<TD>1000 USD</TD>
<TD ROWSPAN="2" ALIGN="center">1500 USD</TD>
</TR>
|
La siguiente fila, la cuarta, será muy similar a la segunda, ya que sus celdas no usan ROWSPAN ni COLSPAN y tendremos que tener en cuenta las celdas de la fila anterior que se expanden hasta la cuarta. El código que debemos usar será:
<TR>
<TH>Avión preferente</TH>
<TD>850 USD</TD>
<TD>1150 USD</TD>
</TR>
|
Ya hemos llegado a la última de las filas. A estas alturas ya nos resultará fácil. La primera celda se expande dos columnas, con lo que tendremos que definir un total de 4 celdas para completar las 5 columnas:
<TR>
<TH COLSPAN="2">2 semanas</TH>
<TD>1300 USD</TD>
<TD>1850 USD</TD>
<TD>2600 USD</TD>
</TR>
|
Tras haber escrito todo este código es momento de volver a ver el resultado con un navegador. En este caso obtendremos la tabla de la figura 6.25. Ya está prácticamente terminada nuestra tabla objetivo, sólo nos quedan algunos detalles.
8.5. Paso 5.
En este quinto y último paso daremos los últimos acabados a la página. Primero daremos formato al texto del título. Para ello usaremos la etiqueta FONT. Para elegir el color rojo (#FF0000 usando el código hexadecimal) usaremos el atributo COLOR y para aumentar el tamaño usaremos el atributo SIZE:
<CAPTION>
<FONT SIZE="+2" COLOR="#FF0000">
SuperOFERTA viaje a Nueva Zelanda
</FONT>
</CAPTION>
|
Por último debemos centrar las celdas donde están los precios de los distintos viajes. Estas celdas son las creadas con la etiqueta TD y deberemos usar el atributo ALIGN de la siguiente manera:
<TD ALIGN="center">700 USD</TD>
|
Repitiendo esto para el resto de las celdas ya tenemos la tabla terminada. El código final será:
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="1">
<CAPTION><FONT SIZE="+2" COLOR="#FF0000">SuperOFERTA viaje a Nueva Zelanda</FONT></CAPTION>
<TR><TH ROWSPAN="2" COLSPAN="2"></TH>
<TH COLSPAN="2">Hoteles 3 estrellas</TH>
<TH ROWSPAN="2">Hoteles 4 estrellas</TH>
</TR>
<TR><TH>Sólo alojamiento</TH>
<TH>Pensión completa</TH>
</TR>
<TR><TH ROWSPAN="2">1 semana</TH>
<TH>Avión turista</TH>
<ALIGN="center">700 USD</TD>
<TD ALIGN="center">1000 USD</TD>
<TD ROWSPAN="2" ALIGN="center">1500 USD</TD>
</TR>
<TR><TH>Avión preferente</TH>
<TD ALIGN="center">850 USD</TD>
<TD ALIGN="center">1150 USD</TD>
</TR>
<TR><TH COLSPAN="2">2 semanas</TH>
<TD ALIGN="center">1300 USD</TD>
<TD ALIGN="center">1850 USD</TD>
<TD ALIGN="center">2600 USD</TD>
</TR>
</TABLE>
|
Una vez escrito por completo guardamos el archivo y volvemos a verlo con el navegador eligiendo la opción (o pulsando el botón) actualizar o reload Si hemos conseguido crear esta tabla es indudable que somos capaces de crear cualquier otra. Como ya comentamos anteriormente el método usado por el lenguaje HTML para crear tablas no es muy sencillo y el proceso se hace algo pesado. Por esta razón en ocasiones es conveniente usar algún asistente o wizard de creación de tablas. Un excelente ejemplo de este tipo de asistentes es el que acompaña al editor de HTML HomeSite 3.0 y que podemos ver en la figura 6.26. El problema de este tipo de asistentes es que no siempre permiten aprovechar todas las posibilidades del lenguaje HTML y además en ocasiones no obtenemos con ellos el resultado deseado. Pero ahora nosotros ya conocemos las etiquetas y atributos de creación de tablas del lenguaje HTML, con lo que no nos resultará complicado retocar el código creado con el asistente.
Figura 6.26. Los asistente (wizard) para la creación de tablas como este, incluido con el editor de HTML HomeSite, son de gran ayuda en la creación de tablas complicadas.
 | Un buen truco para hacer compatibles las con los navegadores que no entiendan la etiqueta TABLE ni sus subetiquetas es incluir la etiqueta <BR> al final de cada fila (antes de </TR>). De esta manera forzaremos un cambio de línea que simula, a grosso modo, un cambio de fila. |