-
Guas HTML
Gua 1 HTML . Elaborada por: Daniel Mora 1
2012
GUIA 3 Tablas.
Hipervnculo mediante una imagen y La solucin es simple y
consiste en disponer la marca encerrada entre la marca de comienzo
y fin del enlace()
Presione alguna de las imagenes para conocer ms sobre esa
obra.
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.
Argentina La Nacin Clarn Pgina 12
Tabla ()
Para la creacin de una tabla intervienen una serie de
elementos:
Es la marca de comienzo de la tabla. Este elemento requiere la
marca de cierre.
Es la marca de comienzo de una fila. Esta marca debe estar
dentro del elemento table. Este elemento requiere la marca de
cierre.
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.
China1300 millones India1080 millones Estados Unidos295
millones
-
Guas HTML
Gua 1 HTML . Elaborada por: Daniel Mora 2
2012
Tabla con encabezado ()
Para indicar que se trata de una celda de encabezado utilizamos
el elemento en lugar de . El navegador representa distinto las
celdas de datos y las celdas de encabezamiento.
PaisesCantidad de habitantes China1300 millones India1080
millones Estados Unidos295 millones
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: Facturacin de
los ltimos tres meses
Si por el contrario queremos que una celda se extienda a nivel
de filas luego hacemos: Secciones
-------------------------------------------------------------------------------------------------------------------
RecursosFacturacin de los ltimos tres meses Discos
Duros230002720026000 CPU730006730051000
Monitores530007200088000
-
Guas HTML
Gua 1 HTML . Elaborada por: Daniel Mora 3
2012
Propiedades de las tablas.
1. Las tablas tienen sus propios atributos o propiedades que se
colocaran dentro de su etiqueta, la etiqueta . 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:
100 200 300
400 500 600
b. Encabezados en las tablas:
Nombre Telefono Telefono
Bill
Gates
555 77
854 555 855
-
Guas HTML
Gua 1 HTML . Elaborada por: Daniel Mora 4
2012
c. Encabezados verticales:
Nombre: Bill Gates
Telefono: 555 77 854
Telefono: 555 77 855
d. Celdas que ocupan dos
columnas:
Nombre Telefono
Bill Gates 555 77 854 555 77 855
e. Celdas que ocupan dos filas:
Nombre: Bill Gates
Telefono:
555 77 854
555 77 855
f. Con cellspacing:
Primera Fila
Segunda Fila
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 Cabezas Previsin 2010 Previsin 2020
Ballena 6000 4000 1500
-
Guas HTML
Gua 1 HTML . Elaborada por: Daniel Mora 5
2012
Oso Pardo 50 0
Lince 10
Tigre 300 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/
