1. 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="#000
000" >
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:
2. <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Ñ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ón crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
3. 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ón</td>
<td colspan="2">58 a 63 dí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ón de vida del pelo/cabello</td>
<td colspan="2">1 año</td>
<td>2 a 7 añ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.
