Guas HTML

2012

GUIA 3 Tablas.
Hipervnculo mediante una imagen <a> y <img>
La solucin es simple y consiste en disponer la marca <img> encerrada entre la marca de
comienzo y fin del enlace(<a>)
<h2>Presione alguna de las imagenes para conocer ms sobre esa obra.</h2>
<a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geomtrica"></a>
<br>
<a href="pagina2.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geomtrica"></a>

Listas anidadas.
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de
distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item puede ser
una lista ordenada.
Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado
de las marcas.
<ol>
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nacin</a></li>
<li><a href="http://www.clarin.com.ar">Clarn</a></li>
<li><a href="http://www.pagina12.com.ar">Pgina 12</a></li>
</ul>
</li>

Tabla (<table><tr><td>)
Para la creacin de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table.
Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda o columna. Esta marca debe estar dentro del
elemento tr. Este elemento requiere la marca de cierre.
<table border="1">
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>

Gua 1 HTML . Elaborada por: Daniel Mora

Guas HTML
2012

Tabla con encabezado (<th>)

Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de
<td>. El navegador representa distinto las celdas de datos y las celdas de encabezamiento.
<table border="1">
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>

Tabla y combinacin de celdas

En algunas situaciones se necesita que una celda ocupe el lugar de dos o ms celdas en forma
horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades
llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad colspan con
el valor 3:
<td colspan="3">Facturacin de los ltimos tres meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:
<td rowspan="3">Secciones</td>
------------------------------------------------------------------------------------------------------------------<table border="1">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th>
</tr>
<tr>
<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>
<tr>
<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>
</tr>
<tr>
<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>
</tr>

Gua 1 HTML . Elaborada por: Daniel Mora

Guas HTML
2012
Propiedades de las tablas.
1. Las tablas tienen sus propios atributos o propiedades que se colocaran dentro de su
etiqueta, la etiqueta <table bgcolor=red etc>. Entre los ms importantes
destacamos:
align

2. Alinea horizontalmente la tabla con respecto a su entorno.

background

3. Nos permite colocar un fondo para la tabla a partir de un

enlace a una imagen.

bgcolor

4. Da color de fondo a la tabla.

border

5. Define el nmero de pxel del borde principal.

bordercolor

6. Define el color del borde.

cellpadding

7. Define, en pxel, el espacio entre los bordes de la celda y el

contenido de la misma.

cellspacing

8. Define el espacio entre los bordes (en pxel).

height

9. Define la altura de la tabla en pxel o porcentaje.

width

10. Define la anchura de la tabla en pxel o porcentaje.

Ejercicios:
1. Desarrollar una pgina que muestre dos imgenes llamadas foto2.jpg y foto3.jpg, las
mismas se encuentran almacenadas en el servidor en la misma carpeta donde se
almacenar
la
pgina
que
usted
desarrollar.
Disponer un link para que al oprimir la imagen se direccione a un sitio en internet o
una pgina diseada por usted.
2. Confeccionar una lista no ordenada de lenguajes de programacin (u otro tema).
Luego disponer una lista ordenada con hipervnculos a sitios que tratan dichos temas.
3. Confeccionar una tabla que muestre en la primer columna los nombre de distintos
empleados de una compaa y en la segunda el sueldo bruto (la compaa tiene 4
empleados) Mostrar los textos 'Nombre del Empleado' y 'Sueldo Bruto' como primer fila
de la tabla.
4. Modificar el ejercicio anterior, colocndole el encabezado a la tabla.
5. Confeccionar una tabla que muestre los nombres de peridicos y su nombre de
dominio agrupados por paises. En la primer columna disponer los nombre de paises,
expandir en fila de acuerdo a la cantidad de diarios de cada pais.
6. Realizar las siguientes tablas
a.

Esta tabla no tiene bordes:

b.

Encabezados en las tablas:

100 200 300

Nombre Telefono

400 500 600

Bill

555 77

Gates

854

Telefono

555 855

Gua 1 HTML . Elaborada por: Daniel Mora

Guas HTML
2012
c.

Encabezados verticales:
e.

Nombre: Bill Gates

Celdas que ocupan dos filas:

Nombre: Bill Gates

Telefono: 555 77 854
555 77 854
Telefono:

Telefono: 555 77 855

555 77 855

f.
d.

Celdas que ocupan dos

columnas:

Nombre

Con cellspacing:

Primera

Fila

Telefono
Segunda Fila

Bill Gates 555 77 854 555 77 855

7. Realizar la tabla que se describe a continuacin.

Aadir link a los datos de la primera columna.

8. Realizar la siguiente tabla.
Animales en peligro de extincin
Nombre
Ballena

Cabezas Previsin 2010 Previsin 2020

6000

4000

1500

Gua 1 HTML . Elaborada por: Daniel Mora

Guas HTML
2012
Oso Pardo

50

Lince

10

Tigre

300

0
210

9. Realizar la siguiente tabla. Cambiar las propiedades que desee para mejorar
presentacin

10. Realizar un calendario para el mes de Diciembre, ao 2012, resaltando das festivos.
BIBLIOGRAFIA
http://www.desarrolloweb.com/manuales/21/
http://www.htmlya.com.ar/

Gua 1 HTML . Elaborada por: Daniel Mora