Ejercicio 2.

1 Abre el documento perros.htm, de la carpeta originales/animales del curso.

2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales

En el documento que has abierto vamos a crear la siguiente tabla:

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE

DIFERENCIAS PERRO

HOMBRE PEQUEÑO GRANDE

Duración crecimiento 10 meses 18 a 24 meses 16 años

Tiempo de gestación 58 a 63 días 9 meses

Duración de vida del pelo/cabello 1 año 2 a 7 años

Empezamos por definir la etiqueta de la tabla:

3 Escribe delante de la etiqueta </body>:

<table width="575" border="2" align="center" cellspacing="2" bordercolor="#000000" >

El atributo width nos permite definir la tabla de un tamaño fijo para que ese tamaño no

cambie según el tamaño de la ventana abierta.

Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca más

grueso.

El atributo align con el valor center nos permite indicar que la tabla estará centrada con

respecto a la ventana.

Con el valor 2 del atributo cellspacing hacemos que aparezca un hueco entre las celdas

de la tabla.

El atributo bordercolor nos permite definir el color del borde la tabla.

Para que no se nos olvide cerrar etiquetas es mejor añadir la etiqueta de cierre y después entre la dos etiquetas añadir las otras.

4 Escribe:

</table>

La tabla tiene seis filas (contamos el número mayor de filas) y el texto contenido en ellas está centrado tanto en horizontal como en vertical:

5 Escribe seis veces:

<tr align="center" valign="middle">

</tr>

Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cuál es la fila con mayor número de columnas, tiene cuatro columnas.

Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que indicar que esta se expande sobre cuatro columnas:

6 Escribe después de la primera etiqueta <tr..: <td colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>

Vamos a rellenar ahora la segunda fila.

En esta fila la primera columna se expande sobre dos filas:

7 Escribe después de la segunda etiqueta <tr..:

<td rowspan="2">DIFERENCIAS</td>

La segunda columna se expande sobre dos columnas:

8 Escribe a continuación:

<td colspan="2">PERRO</td>

La tercera columna se expande sobre dos filas:

9 Escribe a continuación:

<td rowspan="2">HOMBRE</td>

Vamos a rellenar ahora la tercera fila. En esta fila sólo tenemos que definir dos columnas ya que la primera y la última están incluidas en el rowspan de la fila anterior.

10 Escribe después de la tercera etiqueta <tr..: <td>PEQUE&Ntilde;O</td>

<td>GRANDE</td>

Vamos a rellenar ahora la cuarta fila. En esta fila tenemos que definir las cuatro columnas normales

11 Escribe después de la cuarta etiqueta <tr..: <td>Duraci&oacute;n crecimiento</td>

<td>10 meses</td>

<td>18 a 24 meses</td>

<td>16 a&ntilde;os</td>

Vamos a rellenar ahora la quinta fila. En esta fila tenemos que indicar que la segunda columna se expande sobre dos columnas.

12 Escribe después de la quinta etiqueta <tr..: <td>Tiempo de gestaci&oacute;n</td>

<td colspan="2">58 a 63 d&iacute;as</td>

<td>9 meses</td>

Por último rellenamos la sexta fila. En esta fila tenemos que indicar también que la segunda columna se expande sobre dos columnas.

13 Escribe después de la sexta etiqueta <tr..: <td>Duraci&oacute;n de vida del pelo/cabello</td>

<td colspan="2">1 a&ntilde;o</td>

<td>2 a 7 a&ntilde;os</td>

Veamos el resultado.

14 Guarda los cambios y abre la página con tu navegador.

Ahora añadiremos los colores de fondo. Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la página en tu navegador (como hiciste en el ejercicio paso a paso del tema 3).

15 Añade background="imagenes/fondopatas.gif" dentro de la etiqueta <table>. De

este modo, la imagen fondopatas.gif pasará a ser la imagen de fondo de la tabla.

16 Añade bgcolor="#669966" dentro de la primera etiqueta <tr>. De este modo, la

primera fila de la tabla será de color verde oscuro.

17 Añade bgcolor="#FFCC99" dentro de la segunda etiqueta <tr>. De este modo, la

segunda fila de la tabla será de color naranja.

18 Añade bgcolor="#FFFF99" dentro de la tercera etiqueta <tr>. De este modo, las

celdas de esa fila, que contienen el texto PEQUEÑO y GRANDE, serán de color amarillo.

Por último cambiaremos las tres primeras filas para que el texto contenido en ellas tenga formato de cabecera de columna.

19 Sustituye td por th en las líneas que se encuentran entre los tres primeros pares de

etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarán a ser

títulos de columna, por lo que el texto aparecerá centrado y en negrita.