crear sitios web usando cÓdigo html · estructura de una tabla (1 de 3) las tablas se definen de...
TRANSCRIPT
TEMA 2.
CREAR SITIOS WEB USANDO CÓDIGO HTML
Tecnologías de la Información1ºBachillerato
IES Zurbarán (Badajoz)
Sesión 10
Tablas
Introducción
● Las tablas son posiblemente la manera más clara de organizar la información.
● También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros align.
Estructura de una tabla (1 de 3)
● Las tablas se definen de la siguiente manera:– primero se definen las características de la tabla
en la etiqueta TABLE– después se definen las características de la fila
usando la etiqueta TR– y por último se definen las características de
cada celda de la fila en las etiquetas TD.
Estructura de una tabla (2 de 3)
● Ejemplo de una tabla de 2 filas y 3 columnas sin bordes:
<TABLE><TR>
<TD>Primera</TD><TD>Segunda</TD><TD>Tercera</TD>
</TR><TR>
<TD>Cuarta</TD><TD>Quinta</TD><TD>Sexta</TD>
</TR></TABLE>
Estructura de una tabla (2 de 3)
● Ejemplo de una tabla de 2 filas y 3 columnas con bordes:
<TABLE BORDER="1"><TR>
<TD>Primera</TD><TD>Segunda</TD><TD>Tercera</TD>
</TR><TR>
<TD>Cuarta</TD><TD>Quinta</TD><TD>Sexta</TD>
</TR></TABLE>
Ejercicio 25.(tablas sencillas)
Pon el título
H1
tabla de 3 filas x 3 columnas
El borde de la tabla tiene un grosor de 5 pixels
Fondo negro, color del texto blanco
El texto del interior de las tablas va en negrita y el color:
1ªfila: aqua2ªfila: red3ªfila: green
Atributos de la etiqueta <TABLE>
● La etiqueta <table> utiliza los siguientes atributos: – BORDER: indica que grosor tendrá el borde exterior de la tabla. Por defecto
es cero, lo que significa que no dibujará borde alguno.– CELLSPACING: define el número de pixels que separarán las celdas unas
de otras.– CELLPADDING: número de pixels entre el borde interno de la celda y el
contenido de ésta.– WIDTH y HEIGHT: ancho y alto de la tabla. Se puede expresar en pixels o
en %. Por ejemplo, <TABLE WIDTH="100%">– ALIGN: alinear la tabla a izquierda (LEFT), derecha (RIGHT) o centro
(CENTER)– BACKGROUND: imagen de fondo para la tabla.– BGCOLOR: color de fondo para la tabla.
Ejercicio 26.(jugar con los atributos de la etiqueta TABLE 1)
Crea la carpeta Ejercicio 26 y haz dentro de ella la siguiente página web (ejercicio26.html):
Ejercicio 27.(jugar con los atributos de la etiqueta TABLE 2)
Tipo de letra Courier a 5 pixels y en color negro
Tipo de letra Courier a 3 pixels y en color blanco
Lista con viñetas. Tipo de símbolo: square.
Enlace a http://www.proverbia.net
Tabla con borde 1 pixel.
Ancho y alto: 100%
El fondo se llama bg2.gif
Atributos de la etiqueta <TR>
● La etiqueta <TR> utiliza los siguientes atributos: – ALIGN: alinea el contenidos de las celdas de la fila horizontalmente
a izquierda (left), derecha (right) o centro (center).
– VALIGN: alinea el contenido de las celdas de la fila verticalmente arriba (top), abajo (bottom) o centro (middle).
– BGCOLOR: indica el color de fondo de todas las celdas de la fila.
– HEIGHT: define el alto para toda la fila
Ejercicio 28.(jugar con los atributos de la etiqueta TABLE y de la etiqueta TR)
Utiliza una tabla ajustada a la página web
Las imágenes van centradas en
la fila (verticalmente y
horizontalmente)
Usa el parámetro aligny valign dentro de las etiquetas TR para centrar el contenidos de
las celdas.
La primera imagen se llama super1.jpg, la segunda super2.jpg, ...
Crea la carpeta Ejercicio 28 y haz dentro de ella la siguiente página:
Ejercicio 29.(jugar con los atributos de la etiqueta TABLE y de la etiqueta TR)
Quita el borde que rodea a la
tabla y a sus celdas.
Duplica la carpeta Ejercicio 28, renombrala a Ejercicio 29 y modifica la página index.html para que tenga el siguiente aspecto:
Ejercicio 30 (1 de 2)(jugar con los atributos de la etiqueta TABLE y de la etiqueta TR)
Cada imagen es un enlace a una página web.
En el primer caso, la imagen
super1.jpg enlaza con la página
super1.html,super2.jpg consuper2.html, ...
Las filas 1 y 3 tienen un color de
fondo rojo (usa BGCOLOR en las
etiquetas TR)
Duplica la carpeta Ejercicio 29, renombrala a Ejercicio 30 y modifica la página index.html para que tenga el siguiente aspecto:
La imagen se llama
super1.jpg.
Crea una tabla que abarque el
100% del ancho y alto de la
página web e inserta la
imagen centrada en la horizontal y
en la vertical.
Ten en cuenta que las
dimensiones de la imagen son
200x200. Modifica esta
dimensiones por 350x350
Ejercicio 30 (2 de 2)(jugar con los atributos de la etiqueta TABLE y de la etiqueta TR)
Llama a la página super1.html y crea 8 más: super2.html, super3.html, ... cada una tendrá la imagen adecuada: super1.jpg, super2.jpg, ...
Cuando piques en la imagen haz que vaya a la página index.html
Pon border=”0” a la imagen para quitarle el borde azul (éste aparece cuando conviertes una imagen en un enlace)
Atributos de la etiqueta <TD>
● La etiqueta <TD> utiliza los siguientes atributos: – ALIGN: alinea el contenido de la celda horizontalmente a izquierda
(left), derecha (right) o centro (center).
– VALIGN: alinea el contenido de la celda verticalmente arriba (top), abajo (bottom) o centro (middle).
– BGCOLOR: indica el color de fondo para la celda.
– BACKGROUND: indica la imagen de fondo para la celda.
– WIDTH: especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador).
– HEIGHT: alto de la celda.
Ejercicio 31(jugar con los atributos de la etiqueta TABLE)
El ejercicio consiste en hacer una página web que imite un tablero de ajedrez.
Haz una tabla de 8x8 que se ajuste 100% al ancho y 100% al alto de la página web.
Características de la tabla:● dimensiones: 8 filas x 8 columnas● ancho del borde: 1 pixel.● espacio entre celdas: 0 pixels.
Ejercicio 32(jugar con los atributos de la etiqueta TABLE, TR y TD)
Duplica ejercicio31.html, renombralo a ejercicio32.html y cortalo a una carpeta llamada ejercicio 32
torre.gif caballo.gif alfil.gif rey.gif reina.gif
Características de las celdas <TD>:
● ancho: 12,5%● alto: 12,5%
Características de las celdas <TR>:
● imágenes centradas en la horizontal y en la vertical
Unión de las celdas de una tabla (1 de 2)
● Sabemos hacer tablas de 1x1, 2x2, 3x3, etc...● Pero... ¿cómo se puede hacer una tabla de este
estilo?
● Dicho de otro modo.. ¿cómo juntamos celdas contiguas?
Unión de las celdas de una tabla (2 de 2)
● La solución pasa por usar los siguientes parámetros en las etiquetas <TD> que lo necesiten:– COLSPAN: indica el número de celdas de la misma fila
que se van a unir para formar una sola.– ROWSPAN: indica el número de celdas de diferentes
filas que se van a unir para formar una sola.
● Veamos como estaba hecha la tabla del ejemplo...
Ejemplo de tabla con celdas contiguas
<table border="6" cellspacing="6" width="30%"> <tr> <td colspan="2" background="bg2.gif"><b><font
color="green">Estas dos columnas están unidas</font></b>
</td> </tr> <tr> <td>Una celda</td> <td rowspan="3" background="bg2.gif"><b><font
color="green">Estas tres filas también están unidas</font></b>
</td> </tr> <tr> <td>Otra celda</td> </tr> <tr> <td>y otra</td> </tr></table>
Fijarse aquí(solamente un TD)
y aquí
Ejercicio 33(jugar con los atributos de la etiqueta TABLE, TR y TD)
El fondo de la página es un fichero llamado rana.gif
Características de la tabla <TABLE>:
● espacio entre celdas: 2 pixels
● espacio entre el borde interno y el contenido de las celdas: 15 pixels
● borde: 0 pixels● color de fondo
de la tabla: green
Características de las filas
<TR>:
● color de fondo: lightgreen
Estas seis celdas están unidas
ROWSPAN=”6”y
tienen un color verde
Estas dos columnas están unidas COLSPAN=”2”
Tablas anidadas
● Se llama tabla anidada a aquella tabla que forman parte, a su vez, de otra tabla.
● Se habla entonces de tabla interior y tabla exterior.
● La tabla exterior contiene a la interior y esta está contenida en la exterior.
● Para hacer una tabla anidada, solamente basta con escribir la tabla interior entre alguna etiqueta <TD>...</TD> de la tabla exterior.
Ejemplo de tabla con celdas contiguas
<table border="0" cellpadding="30" cellspacing="2" bgcolor="green">
<tr bgcolor="lightgreen"> <td>Esta es una celda de la tabla exterior</td> <td>Esta es otra celda de la tabla exterior</td> </tr> <tr bgcolor="lightgreen"> <td>y ésta es otra...</td> <td> <table border="0" cellspacing="2" bgcolor="blue"> <tr bgcolor="lightblue"> <td>Una celda de la tabla interior</td> </tr> <tr bgcolor="lightblue"> <td>Otra celda de la tabla interior</td> </tr> </table> </td> </tr></table>
Ejercicio 34(tablas anidadas)
El ejercicio consiste en hacer una tabla externa de 1x1 sin bordes que ocupe el 100% del ancho y alto de la página y que incluya a la tabla que hicimos en el ejercicio 33.
El resultado debe ser este:
Ejercicio 35(tablas anidadas)
El ejercicio consiste en hacer una tabla externa de 1x1 sin bordes que ocupe el 100% del ancho y alto de la página y que incluya tu horario de clase. Utiliza un color de celda para cada asignatura. El resultado debe ser este: