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> 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> 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>
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> 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> |
|
|
|
|
|
No hay comentarios:
Publicar un comentario