Professional Documents
Culture Documents
HTML 2. Tablas: IES SERRANÍA (Alozaina) CFGM Sistemas Microinformáticos y Redes
HTML 2. Tablas: IES SERRANÍA (Alozaina) CFGM Sistemas Microinformáticos y Redes
2. Tablas
IES SERRANÍA (Alozaina)
(MHPSOR
WDEOHERUGHU ´´EJFRORU ´))(())´FHOOVSDFLQJ ´´ZLGWK ´´!
WG!GHILQHXQDFHOGDHQXQDWDEOD'HEHGHDSDUHFHUVLHPSUHGHQWURGHXQDILODGHOD
WDEODGHILQLGDFRQHOHOHPHQWRWU!
$WULEXWRV
DOLJQ HVWDEOHFH OD DOLQHDFLyQ GHO FRQWHQLGR GH XQD FHOGD 3XHGH WRPDU ORV YDORUHV OHIW ULJKW
FHQWHU\MXVWLI\
EJFRORUHVSHFLILFDHOFRORUGHIRQGRGHXQDFHOGDGHODWDEOD
ERUGHUFRORUGHWHUPLQDHOFRORUGHERUGHGHXQDFHOGDGHODWDEOD1RHVXQHOHPHQWRHVWiQGDUGH
+70/
ERUGHUFRORUGDUNHVSHFLILFDHOFRORUGHORVERUGHVL]TXLHUGR\VXSHULRUGHXQDFHOGDSDUDFUHDUXQ
HIHFWRWULGLPHQVLRQDO(VSHFtILFRGH,QWHUQHW([SORUHU
ERUGHUFRORUOLJKW HVSHFLILFD HO FRORU GH ORV ERUGHV GHUHFKR H LQIHULRU GH XQD FHOGD SDUD FUHDU XQ
HIHFWRWULGLPHQVLRQDO(VSHFtILFRGH,QWHUQHW([SORUHU
FROVSDQLQGLFDHOQ~PHURGHFHOGDVGHXQDILODTXHVHXQLUiQHQXQDVROD
KHLJKWHVSHFLILFDODDOWXUDGHXQDFHOGD
QRZUDSHYLWDTXHODFHOGDDMXVWHDXWRPiWLFDPHQWHVXWDPDxRDOFRQWHQLGRGHODPLVPD
URZVSDQLQGLFDHOQ~PHURGHFHOGDVGHXQDFROXPQDTXHVHXQLUiQHQXQDVROD
7DEODV 3iJLQD1
YDOLJQ HVWDEOHFH OD DOLQHDFLyQ YHUWLFDO GHO FRQWHQLGR GH XQD FHOGD GH OD WDEOD 3XHGH WRPDU ORV
YDORUHVEDVHOLQHOtQHDGHEDVHERWWRPLQIHULRUPLGGOHPHGLR\WRSVXSHULRU
ZLGWKGHWHUPLQDODDQFKXUDGHXQDFHOGDHQSt[HOHV
(MHPSOR
WGDOLJQ ´FHQWHU´EJFRORU ´EOXH´FROVSDQ ´ERUGHUFRORU ´\HOORZ´!««WG!
WK!GHILQHXQDFHOGDGHHQFDEH]DGRHQXQDWDEOD([SORUHUDSOLFDQHJULWD\DOLQHDFLyQ
FHQWUDGDFRPRIRUPDWRRWURVH[SORUDGRUHVSXHGHQPRVWUDUORVGHIRUPDGLIHUHQWH3RVHH
ORVPLVPRVDWULEXWRVTXHWG!
(MHPSOR
WKDOLJQ ´FHQWHU´EJFRORU ´EOXH´FROVSDQ ´ERUGHUFRORU ´\HOORZ´!«WG!
WU! GHILQH XQD ILOD HQ XQD WDEOD /DV HWLTXHWDV GH GHILQLFLyQ GH FHOGDV LQGLYLGXDOHV
WK!WG!GHEHUiQLUVLHPSUHGHQWURGHODVHWLTXHWDVGHILODWU!WU!
$WULEXWRV
DOLJQ HVWDEOHFH OD DOLQHDFLyQ GHO FRQWHQLGR GH XQD FHOGD 3XHGH WRPDU ORV YDORUHV OHIW ULJKW
FHQWHU\MXVWLI\
EJFRORUHVSHFLILFDHOFRORUGHIRQGRGHXQDFHOGDGHODWDEOD
ERUGHUFRORUGHWHUPLQDHOFRORUGHERUGHGHXQDFHOGDGHODWDEOD1RHVXQHOHPHQWRHVWiQGDUGH
+70/
ERUGHUFRORUGDUNHVSHFLILFDHOFRORUGHORVERUGHVL]TXLHUGR\VXSHULRUGHXQDFHOGDSDUDFUHDUXQ
HIHFWRWULGLPHQVLRQDO(VSHFtILFRGH,QWHUQHW([SORUHU
ERUGHUFRORUOLJKW HVSHFLILFD HO FRORU GH ORV ERUGHV GHUHFKR H LQIHULRU GH XQD FHOGD SDUD FUHDU XQ
HIHFWRWULGLPHQVLRQDO(VSHFtILFRGH,QWHUQHW([SORUHU
KHLJKWHVSHFLILFDODDOWXUDGHXQDFHOGD
QRZUDSHYLWDTXHODFHOGDDMXVWHDXWRPiWLFDPHQWHVXWDPDxRDOFRQWHQLGRGHODPLVPD
YDOLJQ HVWDEOHFH OD DOLQHDFLyQ YHUWLFDO GHO FRQWHQLGR GH XQD FHOGD GH OD WDEOD 3XHGH WRPDU ORV
YDORUHVEDVHOLQHOtQHDGHEDVHERWWRPLQIHULRUPLGGOHPHGLR\WRSVXSHULRU
ZLGWKGHWHUPLQDODDQFKXUDGHXQDFHOGDHQSt[HOHV
(MHPSOR
WUDOLJQ ´MXVWLI\´EJFRORU ´EOXH´KHLJKW ´´!WG!«WG!WU!
FDSWLRQ!HVSHFLILFDXQWtWXORSDUDXQDWDEODRJUiILFR
$WULEXWRV
DOLJQHVSHFLILFDODDOLQHDFLyQGHOWtWXOR3XHGHWRPDUORVYDORUHVOHIWULJKWWRS\ERWWRP
(MHPSOR
FDSWLRQDOLJQ ´WRS´!*UXSRVFXUVRFDSWLRQ!
7DEODV 3iJLQD2
ESTRUCTURA DE UNA TABLA
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para
confeccionar las tablas.
<TABLE>
[resto de las etiquetas]
</TABLE>
Con esto se presentarían los datos tabulados, pero faltaría la característica que
hace más atractivas a las tablas, y es que estos datos vayan dentro de unos
cajetines formados por un borde. Para esto tenemos que añadir el atributo BORDER
a la etiqueta, es decir:
<TABLE BORDER>
[resto de las etiquetas]
</TABLE>
2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila
(row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como
filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
<TR>
[etiquetas de las distintas celdas de la segunda fila]
</TR>
3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que
son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto,
imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en
esa fila.
Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de
cada celda vamos a poner un texto indicativo de la posición de dicha celda:
<TABLE BORDER>
<TR>
<TD>fila1‐celda1</TD> <TD>fila1‐celda2</TD> <TD>fila1‐celda3</TD>
</TR>
<TR>
<TD>fila2‐celda1</TD> <TD>fila2‐celda2</TD> <TD>fila2‐celda3</TD>
</TR>
</TABLE>
Que resulta:
Tablas Página 3
Filas con
n desiguall número de celdass
Si en el ejemplo anterior
a eliminamos la tercera
a celda de
e la segunnda fila, es
e decir sii
borramos <TD>fila2
2-celda3<//TD>, resu
ultará:
Titular de la tabla
a
o el espes
Variando sor de los bordes
El atributo
o BORDER R (visto má
ás arriba) pone por defecto un borde dee espesor igual a la
a
unidad. Peero se pue
ede hacer que
q este bo orde sea ta
an grueso como querramos, pon
niendo:
<TABLE B
BORDER=n
número desseado>
Tablas Página 4
Resultará:
Celdas de cabecerra
Esto se co
onsigue con la etique
eta <TH> y </TH> (en vez de la normal <TD> y </TD>)
<
<TR>
na 1</TH> <TH>Column
<TH>Column na 2</TH> <
<TH>Columna
a 3</TH>
</TR>
Que resultta:
Se pueden
n colocar en
e el sitio que ue lo normal es que vvayan en los bordes,,
q se quieera, aunqu
encabezan
ndo las collumnas o la
as filas.
amiento del
Posiciona d contenido denttro de la celda
c
Normalmeente, el co
ontenido de
d una ceelda está alineado
a a la izquieerda. Pero se puede
e
cambiar e
esto añadie
endo dentro de la etiq
queta de la
a celda los siguientess atributos:
<TD ALIGN=
=CENTER> Al centro </TD>
<TD ALIGN=
=RIGHT> A la derecha
a </TD>
<TH ALIGN=
=LEFT> Cabecera a la a </TH> (Reccuérdese que por defecto eestán centradaas)
a izquierda
Tablas Página 5
El alineam
miento porr defecto en el sen ntido verticcal es en el medio. También se puede
e
cambiar, a
añadiendo dentro dee la etiquetta de la celda los sigu
uientes atriibutos:
<TD VALIGN
N=TOP> Arriba </TD>
<TD VALIGN
N=BOTTOM> Abajo </TD
D>
o las dime
Variando ensiones de
d la tablla
El navegaador se en
ncarga normalmentee de dimensionar el tamaño ttotal de la a tabla de
e
acuerdo ccon el núm
mero de fila
as, de colu
umnas, por el conten
nido de lass celdas, espesor
e de
e
los bordess, etc.
A veces nnos puedee convenir forzarle ppara que la a tabla tenga unas dimension nes totaless
mayores que las queq le corrrespondenn, tanto ene anchura a como e n longitudd. Esto see
consigue añadiendoo dentro dee la etiquetta de la ta
abla los atrributos WID
DTH y HEIIGHT iguall
a un porccentaje de la dimenssión de la pantalla, o a una ciffra que eqquivale al número
n dee
pixels.
Por ejemp
plo, si tene
emos la tab
bla:
<TABLE BORRDER WIDTH=60%>
<TR>
<TD><BR><BBR><BR><BR></TD>
<TD VALIGNN=TOP> Arriba </TD>
<TD VALIGNN=BOTTOM> Abajo </TD
D>
</TR>
</TABLE>
<TABLE HEI
IGHT=200>
Tablas Página 6
Celdas que abarca
an a otras
s varias
<TR> <TD C
COLSPAN=2>
Celda sob
bre 2 colum
mnas </TD> <TR>
O, en la misma tab bla, vamoss a añadirr una celda en la prrimera filaa. pero que abarque
e
también a la siguien
nte:
<TD ROWSPA
AN=2> Celda junto a 2 filas </
/TD>
Color de fondo en
n las tabla
as
Se puede conseguir:
Tablas Página 7
<TA
ABLE BORDER
R BGCOLOR="
"#00FF00">
<TR
R> <TD>fila
a1‐celda1</
/TD> <TD>fiila1‐celda2</TD> </T
TR>
<TR
R> <TD>fila
a2‐celda1</
/TD> <TD>fiila2‐celda2</TD> </T
TR>
</T
TABLE>
Que resulta:
<TA
ABLE BORDER
R>
<TR
R><TD BGCOL
LOR="#00FF0
00">fila1‐c
celda1</TD
D><TD>fila1
1‐celda2</TTD></TR>
<TR
R> <TD>fila
a2‐celda1</
/TD> <TD>fi
ila2‐celda2</TD> </T
TR>
</T
TABLE>
Que re
esulta:
3. Que la generralidad de las celdas tenga un color, pero que alguuna celda tenga uno o
parrticular. El atributo del color geeneral se co
oloca en la
a etiqueta T
TABLE, y el
e del colorr
parrticular en la etiquetaa de la cellda en cuestión (una combinacción de los dos casoss
antteriores). por
p ejemplo, vamos a hacer qu ue la generralidad de la tabla se
ea de colorr
rojo
o (#FF000 00), pero que la celdaa 1 de la fila 1 sea de
e color verd
rde (#00FF F00):
<TA
ABLE BORDER
R BGCOLOR="
"#FF0000">
<TR
R><TD BGCOL
LOR="#00FF0
00">fila1‐ccelda1</TD
D><TD>fila1
1‐celda2</TTD></TR>
<TR
R> <TD>fila
a2‐celda1</
/TD> <TD>fiila2‐celda2</TD> </T
TR>
</T
TABLE>
Que resulta:
Imágene
es de fond
do en las tablas
La mayoríía de naveegadores so
oportan la colocación
n de imáge
enes de fonndo en el interior de
e
las tablass, de una manera annáloga a ccomo se hace
h en un
na página (según vimos en la a
Tablas Página 8
Unidad 1
1). Para ello debe emos util izar el atributo
a BACKGROU
B UND="imag
gen.gif" o
BACKGROOUND="imaagen.jpg", visto en d
dicha Unida
ad.
Por ejemp
plo, si pone
emos:
<TABLE BOR
RDER BACKGROUND="nub
bes.jpg">
(Se omite el resto de las ettiquetas de la tabla)
Obtenemo
os:
Por ejemp
plo, para obtener una
a separació
ón de 20 pixeles
p entrre celdas pponemos:
<TABLE BOR
RDER CELLSPACING=20>
>
(Se omite el resto de las ettiquetas de la tabla)
Tablas Página 9
A primera a vista parrece comoo si esto ffuera lo mismo
m que si hubiéraamos aum
mentado ell
espesor d de los borrdes. Pero para commprobar qu ue no es así, hagam
mos que en
e el caso
o
anterior, ttenga adem
más unos bordes
b de 5 de espessor:
<TABLE BOR
RDER=5 CELLSPACING=2
20>
<TABLE BOR
RDER CELLPADDING=20>
>
(Se omite el resto de las etiquetas de la tabla)
ne:
Con lo que se obtien
<TABLE BOR
RDER=5 CELLSPACING=1
15 CELLPADD
DING=20>
(Se omite el resto de las ettiquetas de la tabla)
Tablas Página 10
Con lo que se obtien
ne
Práctica
a 14
Tablas Página 11