El documento proporciona instrucciones para insertar una tabla en una página web sobre perros. Las instrucciones incluyen cómo definir la tabla con seis filas y cuatro columnas, rellenar las celdas con información comparativa sobre perros y humanos, y aplicar formato y color de fondo a las celdas.

1. Trabajo 1
Ejercicio 1.
Vamos a insertar en la página gatos.htm una tabla para colocar la imagen del gatito a la
izquierda de la lista. Para eso crearemos una tabla de una fila y dos columnas, en la columna
de la izquierda colocaremos el texto y en la columna de la derecha la imagen.
1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
2 Haz clic sobre el menú Archivo.
3 Haz clic sobre la opción Abrir. Se abrirá una nueva ventana.
4 En Tipo:, elige Todos los archivos.
5 Selecciona el archivo gatos.htm, que se encuentra en la carpeta animales, y pulsa sobre el
botón Aceptar.
6 Detrás de la etiqueta <hr> añade el siguiente código para añadir una línea en blanco, definir
la tabla, empezar la definición de la primera fila y primera columna de la tabla. Hacemos la
tabla invisible (border="0") y que ocupe todo los ancho de la ventana (width="100%"), la
primera columna ocupará el 70% de la ventana (width="70%") :
<br>
<table width="100%" border="0">
<tr>
<tdwidth="70%">
7 Detrás de la última etiqueta </ul> añade el siguiente código para cerrar la columna y
empezar la otra, ahora la segunda columna ocupará el 30% de la ventana (width="30%"):
</td>
<tdwidth="30%">
8 Detrás de la etiqueta <img> añade el siguiente código para cerrar la columna y cerrar la fila y
la tabla:
</td>
</tr>
</table>
9 Guarda el archivo y cierra el bloc de notas.

2. 10 Abre con tu navegador el archivo gatos.htm, comprueba que ahora la imagen está a la
derecha del texto y si haces la ventana más pequeña, el ancho de las columnas cambia.
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
9 meses
58 a 63 días
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.

3. 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:
<tralign="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..:
<tdcolspan="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..:
<tdrowspan="2">DIFERENCIAS</td>
La segunda columna se expande sobre dos columnas:
8 Escribe a continuación:
<tdcolspan="2">PERRO</td>
La tercera columna se expande sobre dos filas:
9 Escribe a continuación:
<tdrowspan="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>

4. <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.

5. 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.