Ejercicio paso a paso. Trabajar con tablas

Objetivo.

Practicar las operaciones que hay que realizar para modificar las propiedades de la tabla.

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>
<td width="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>
<td width="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.

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:

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.

20 Comprueba que obtienes una página como la que aparece si pulsas aquí.