Maquetación de tablas en HTML

TEMA 2.
CREAR SITIOS WEB USANDO
CÓDIGO HTML
Tecnologías de la Información
1º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
Fondo negro,
color del
texto blanco
H1
El texto del
interior de
las tablas va
en negrita y
el color:
tabla de 3 filas x 3 columnas
El borde de la tabla tiene un
grosor de 5 pixels
1ªfila: aqua
2ªfila: red
3ª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
Tabla con borde
1 pixel.
Ancho y alto:
100%
El fondo se llama
bg2.gif
Enlace a http://www.proverbia.net
Lista con viñetas. Tipo de símbolo: square.
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)
Crea la carpeta Ejercicio 28 y haz dentro de ella la siguiente
página:
Utiliza una tabla
ajustada a la
página web
Las imágenes
van centradas en
la fila
(verticalmente y
horizontalmente)
Usa el
parámetro align
y valign dentro
de las etiquetas
TR para centrar
el contenidos de
las celdas.
La primera imagen se llama super1.jpg, la segunda super2.jpg,
Ejercicio 29.
(jugar con los atributos de la etiqueta TABLE y de la etiqueta TR)
Duplica la carpeta Ejercicio 28, renombrala a Ejercicio 29 y
modifica la página index.html para que tenga el siguiente aspecto:
Quita el borde
que rodea a la
tabla y a sus
celdas.
Ejercicio 30 (1 de 2)
(jugar con los atributos de la etiqueta TABLE y de la etiqueta TR)
Duplica la carpeta Ejercicio 29, renombrala a Ejercicio 30 y
modifica la página index.html para que tenga el siguiente aspecto:
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 con
super2.html, ...
Las filas 1 y 3
tienen un color de
fondo rojo (usa
BGCOLOR en las
etiquetas TR)
Ejercicio 30 (2 de 2)
(jugar con los atributos de la etiqueta TABLE y de la etiqueta TR)
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
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)
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, ...
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
Características de las celdas <TD>:
●
●
ancho: 12,5%
alto: 12,5%
Características de las celdas <TR>:
●
torre.gif
caballo.gif alfil.gif rey.gif reina.gif
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
Fijarse aquí
(solamente un TD)
y aquí
<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>
Ejercicio 33
(jugar con los atributos de la etiqueta TABLE, TR y TD)
Estas dos columnas están unidas COLSPAN=”2”
El fondo de la
página es un
fichero llamado
rana.gif
Características
de las filas
<TR>:
●
color de
fondo:
lightgreen
Características de
la tabla
<TABLE>:
●
●
Estas seis celdas
están unidas
ROWSPAN=”6”
y
tienen un color
verde
●
●
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
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: