tablas en html

investigacion
practica 6

carlossomerapereda
angelricardogastelumcasanova

LastablassurgieronconlaversinHTML 3.0.Lastablas nos permitenrepresentar yordenarcualquier

elemento de nuestra presentacin en diferentes filas ycolumnas de modo que podamosresumir grandes
cantidadesdeinformacindeunamaneraquepuederepresentarserpidayfcilmente.
Elcontenidodeunatablalodebemosdesarrollarentrelastags
<table>
.....
</table>
.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las
columnassecalcularnautomticamentesegnlasceldasquehayencadafila.

Cada fila de la tabla se indica mediante las tags

<tr>
.....
</tr>
. Las tags
<th> y
<td> con sus
correspondientestagsdecierre,indicanparaindicarlasfilasindividualesdentrodecadafila.

Las tags
<th>
.....
</th> indican que setratade celdasquesirven como encabezadode tabla y suelen
visualizarseennegrita.

Lastags
<td>
.....
</td>
indicanquesetratadeceldascomunes.

Laalturayanchuraglobaldeunatablaseindicadentrodelatributo<TABLE>,que
sealalaaperturaycierredeunatabla.LasdimensionessedefinenmedianteWIDTH
(ancho)yHEIGHT(alto)ypuedenexpresarseenpxeloentantosporcientorespecto
alapgina:

<TABLEWIDTH=500>
</TABLE>

Enesteejemplodecdigo,laanchuradelatablaestexpresadaenpxel(500).Sise
eligeestaopcin,seacualsealaresolucinconlaquevengavistalapgina,la
medidadelatablanosufrirvariaciones,esdecir,ennuestrocasosersiemprede
500pxel.
Nosucederlomismo,sinembargo,sidecidimosexpresareltamaomedianteun
porcentaje:

<TABLEWIDTH=50%>
</TABLE>

Enestecaso,laanchuradelatablaserdistintasegnsealaresolucindelvdeodel
usuario.
As,porejemplo,quientengaunvdeoconresolucin640x480verunatabladeunos
320pxel(porquehemosimpostadounanchodetablaequivalenteal50%dela
pgina),mientrasquientengaunvdeoconresolucin800x600verunatablade400
pxel.

espreferiblemantenerelcontrolabsolutosobreladimensindelatablautilizando,por

tanto,lamedicinenpxelynoentantoporciento.

Ahoraechemosunvistazoalamaneraenquedebeestructurarseunatabla.Paraello
utilizaremosalgunasimgenes:

Comovemosporestaimagen,elatributo<TABLE>generalatabla,mientrasque
<TD>sirveparadefinirloscampospresentesdentrodeestatabla.
Heaqucmoeldiseopuedesertransformadoencdigoy,portanto,enunatabla
propiamentedicha:

<TABLEBORDER=1WIDTH=300>

<TDWIDTH=100>

</TD>

<TDWIDTH=100>

</TD>

<TDWIDTH=100>

</TD>

</TABLE>

prueba

prueba

prueba

Enelsiguienteejemplo,consideraremosquequeremoselaborarunatabladeeste

tipo:

Comopodemosobservar,hemosintroducidounanuevamarca<TR>,queesuna
especiede"salto"defiladentrodelatabla.Heaqucmoeldiseopuedeser
transformadoencdigoy,portanto,enunatablapropiamentedicha:

<TABLEBORDER=1WIDTH=300>

<TR>
<TDWIDTH=100>
</TD>

<TDWIDTH=100>
</TD>

<TDWIDTH=100>
</TD>
</TR>

<TR>
<TDWIDTH=100>
</TD>

<TDWIDTH=100>
</TD>

<TDWIDTH=100>
</TD>
</TR>

</TABLE>


prueba

prueba

prueba

prueba

prueba

prueba

Elespacioentrelosdiversoscamposdeunatablasedefinedentrodelamarca
</TABLE>conCELLSPACING=XyCELLPADDING=X(dondeXesladistanciaen
pxel):

<TABLECELLPADDING=10CELLSPACING=10>
</TABLE>

Lacolocacindeltextoydelasimgenesdentrodelosdistintoscampos<TD>dela
tablapuedesermodificadadevariasmaneras:

<TABLEWIDTH=300

HEIGHT=200>
prueba

<TDwidth=100
VALIGN=TOP
>
prueba</TD>

<TD
WIDTH=100
VALIGN=BOTTOM
>
prueba</TD>

<TD
WIDTH=100
VALIGN=MIDDLE
>
prueba</TD>

</TABLE>

prueba

prueba

<TABLEWIDTH=300
HEIGHT=200>

<TDwidth=100
ALIGN=RIGHT
>
prueba</TD>

<TDWIDTH=100

prueba

prueba

prueba

ALIGN=CENTER
>
prueba</TD>

<TDWIDTH=100
ALIGN=LEFT
>
prueba</TD>

</TABLE>

Cadacampopuedeteneruncolordefondodistintodelosotrose,incluso,unfondo
comolosdelaspginaswebnormales(losfondospuedensersustituidosconGIF
animadas):

<TABLEWIDTH=300
HEIGHT=200>

<TDwidth=100
BGCOLOR="red"
>
prueba</TD>

<TD
WIDTH=100
BGCOLOR="ye
llow"
>
prueba</TD>

<TD
WIDTH=100
BGCOLOR="gr
ay"
>
prueba</TD>

</TABLE>

prueba

prueba

prueba

<TABLEWIDTH=300HEIGHT=230>

<TDwidth=100
BACKGROUND="sfondo15.jpg"
>
prueba</TD>


<TDWIDTH=100
BACKGROUND="sfondo26.jpg"
>
prueba</TD>

<TDWIDTH=100
BACKGROUND="sfondo61.jpg"
>
prueba</TD>

</TABLE>

fuentes:

http://www.webestilo.com/html/cap5a.phtml
http://www.htmlpoint.com/guida/html_11.htm
http://www.w3schools.com/html/html_tables.asp