/751#8"")2/ 3*78-1TC. '$/$6=1!+$716 <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/MsH0rBWCYjs"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/MsH0rBWCYjs" type="application/ x-shockwave-flash" wmode="transparent" width="425" height="350"></embed> </object> & .2 %3+9 + ,&* & -&, )- $ +'$-!7& &,*!'* -,!$!2* $ ,!)-, <embed> + '**, + $ (-&,' .!+, $ -+-*!' B&' ,!& )- +(** )- $ .5' + +*- '%($,%&, (* ('* .*$'C (*' &' + -& +'$-!7& ,4&!%&, .3$!9 1 )- $ ,!)-, <embed> &'+(*,$+,3&* < ;;;C-)!516;$!C$6 81 3*78-1UC!-6 /751#8"")2/ Captulo 7. Tablas + +-+ (*!%*+ .*+!'&+9 !&$-17 $ +'('*, (* ** ,$+ ,'+ & $+ (3!&+ /<%3++*+&!$$'9$%'$'!&!'('* +%-1$0!$1+,&,'%($,'< + ,$+ & -,!$!2& $'+ %!+%'+ '&(,'+ !$+9 '$-%&+9 *+ 1 ,5,-$'+ )- $'+ )-+-,!$!2&&-$)-!*',*'&,'*&'(-$!!7&'-%&,'+; )'85UCOC57$648$"1.31/$/8/7!-"1.3-$+ + ,$+ (- '&,&* $%&,'+ +!%($+9 *-(!'&+ !$+ 1 '$-%&+9 *+1(!+,$9+-!.!+!'&+9*+%8$,!($+1',*'+$%&,'+'%($"'+< (+* )- $+ ,$+ +'& 3!$+ '%(*&* 1 -,!$!2*9 +'& -&' $'+ $%&,'+ %3+ ('$4%!'+ < $ (*'$% $+ ,$+ + )- &' +!%(* + -,!$!2& -%&,< -&)- (*2 '.!'9 $+ ,$+ + & -,!$!2* (* %'+,** !&'*%!7& ,-$*< +, -&'+ 6'+9 $+ ,$+ ,%!4& + -,!$!2& (* !&!* $ +,*-,-* $+ (3!&+ /< * $ (3!& * -& !$ -& *& ,$9 $ (! (3!& * ',* !$ +, ,$1$2'&'&,&!'++,'*%('*.*!+'$-%&+&,*'+*&,$< -&)- $-&'+ %$'+ !+6'*+ +!-& -,!$!2&' '1 & 5 $+ ,$+ (* !&!* $ +,*-,-* '%($, $+ (3!&+ /9 + ,*, -& ,4&! '+'$, 1 & *'%&$< $ %',!.' + )- + '%($! & 0+' $ 7!' 1 +- %&,&!%!&,' + %-1 '%($"'< +'$-!7& '**, (* !&!* $ +,*-,-* $+ (3!&+ '&+!+, & $ -,!$!2!7& '"+ +,!$'+ < 7.1. Tablas bsicas + ,$+ %3+ +&!$$+ + !&& '& ,*+ ,!)-,+; <table> (* ** $ ,$9 <tr> (***!$1 <td> (***'$-%&< '&,!&-!7&+%-+,*$7!' -&,$+&!$$; <html> <head><title>Ejemplo de tabla sencilla</title></head> 82 ;;;C-)!516;$!C$6 /751#8"")2/ 3*78-1UC!-6 <body> <h1>Listado de cursos</h1> <table> <tr> <td><strong>Curso</strong></td> <td><strong>Horas</strong></td> <td><strong>Horario</strong></td> </tr> <tr> <td>CSS</td> <td>20</td> <td>16:00 - 20:00</td> </tr> <tr> <td>HTML</td> <td>20</td> <td>16:00 - 20:00</td> </tr> <tr> <td>Dreamweaver</td> <td>60</td> <td>16:00 - 20:00</td> </tr> </table> </body> </html> ! + .!+-$!2 $ 7!' &,*!'* & -$)-!* &.'*9 + ',!& -& ,$ '%' $ )- %-+,*$+!-!&,!%&; ;;;C-)!516;$!C$6 83 3*78-1UC!-6 /751#8"")2/ )'85UCPC+$.3-1#$7!-6$/")--"5$#"1/-6$7)48$767!-$A75=7# ,!)-, <table> &!** ,'+ $+ !$+ 1 '$-%&+ $ ,$< + ,!)-,+ <tr> B$ !&$4+ "table row"C !&& !$ $ ,$ 1 &!**& ,'+ $+ '$-%&+< '* 8$,!%'9 $ ,!)-, <td> B$ !&$4+ "table data cell"C !& -& $+ '$-%&+ $+ !$+9 -&)- *$%&, &'!&'$-%&++!&' celdas de datos< $ !&!* -& ,$9 + (&+* & (*!%* $-* & $+ !$+ )- $ '*%& 1 '&,!&-!7& & $+ '$-%&+< $ %',!.' + )- (*'+ (*!%*' $+ !$+ 1 ('* +' $+ ,!)-,+ <tr> (*&&,+)-$+,!)-,+ <td>< <table> !- Atributos comunes ! 6)"16A)OV/=$:$/716 Atributos especficos summary = "texto" G $5.)7$ #$6"5)!)5 $- "1/7$/)#1 #$ - 7!- I-1 87)-)>/ -16 !86"#15$6=-63$561/6#)6"3")7#6J Tipo de elemento -148$ Descripcin $$.3-$35#$&)/)57!-6#$#716 84 ;;;C-)!516;$!C$6 /751#8"")2/ <tr> 3*78-1UC!-6 )-#$7!- Atributos comunes ! 6)"16A)OV/=$:$/716 Atributos especficos G Tipo de elemento -148$ Descripcin $$.3-$35#$&)/)5"#&)-#$-67!-6#$#716 <td> Atributos comunes $-##$7!- ! 6)"16A)OV/=$:$/716 abbr = "texto" G $5.)7$ #$6"5)!)5 $- "1/7$/)#1 #$ - "$-# I6$ $.3-$ 61!5$ 71#1"1/-16/:$'#15$6#$:1>87)-)>#163153$561/6#)6"3")7#6J Atributos especficos headers = "lista_de_id" G /#)" -6 "$-#6 48$ "79/ "1.1 "!$"$56 35 $67 "$-# I-16 7*78-16 #$ -6 "1-8./6 = &)-6JC $ )/#)" "1.1 8/ -)67 #$ :-15$6 #$-75)!871L)#L#$"$-#6 scope = "col, row, colgroup, rowgroup" G /#)" -6 "$-#6 35 -6 48$ $67 "$-# 6$5 68 "!$"$5C +B 6"13$XL"1-L )/#)" 48$ $67 "$-# $6 - "!$"$5 #$ 71#6-6#$. 6"$-#648$$67 /$/-.)6."1-8./ colspan = "numero" G9.$51#$"1-8./648$1"83$67"$-# rowspan = "numero" G9.$51#$&)-648$1"83$67"$-# Tipo de elemento -148$ Descripcin $$.3-$35#$&)/)5"#8/#$-6"$-#648$&15./-6&)-6#$8/7!-A$6 #$")5A-6"1-8./6#$-7!- ,''+ $'+ ,*!-,'+ !+('&!$+ (* $+ $+9 $'+ %3+ -,!$!2'+ +'& rowspan 1 colspan9 )- + %($& (* '&+,*-!* ,$+ '%($"+ '%' $+ )- + .& %3+ $&,< &,* $'+ %3+ ,*!-,'+9 +7$' + -,!$!2 '*% !,-$ $ ,*!-,' scope9 +'* ,'' '& $+ $+ *)-+.&'&,!&-!7&< '*%$%&,9 $-&+ $+ $+ $ ,$ + -,!$!2& '%' * $+ %3+ $+ $ !$ ' $ '$-%&< & +, +'9 !& $ ,!)-, <th> B$ !&$4+ "table header cell"C (*!&!*)--&$+*',*+$+< ;;;C-)!516;$!C$6 85 3*78-1UC!-6 /751#8"")2/ <th> $-#"!$"$5#$7!- Atributos comunes ! 6)"16A)OV/=$:$/716 abbr = "texto" G $5.)7$ #$6"5)!)5 $- "1/7$/)#1 #$ - "$-# I6$ $.3-$ 61!5$ 71#1"1/-16/:$'#15$6#$:1>87)-)>#163153$561/6#)6"3")7#6J Atributos especficos headers = "lista_de_id" G /#)" -6 "$-#6 48$ "79/ "1.1 "!$"$56 35 $67 "$-# I-16 7*78-16 #$ -6 "1-8./6 = &)-6JC $ )/#)" "1.1 8/ -)67 #$ #$ "$-#6 scope = "col, row, colgroup, rowgroup" G /#)" -6 "$-#6 35 -6 48$ $67 "$-# 6$5 68 "!$"$5C +B 6"13$XL"1-L )/#)" 48$ $67 "$-# $6 - "!$"$5 #$ 71#6-6#$. 6"$-#648$$67 /$/-.)6."1-8./ colspan = "numero" G9.$51#$"1-8./648$1"83$67"$-# rowspan = "numero" G9.$51#$&)-648$1"83$67"$-# Tipo de elemento -148$ Descripcin $$.3-$35#$&)/)5-6"$-#648$61/"!$"$5#$8/&)-1#$8/"1-8./#$- 7!- '+ ,*!-,'+ $ ,!)-, <th> +'& !4&,!'+ )- $'+ ,*!-,'+ !&!'+ (* $ ,!)-, <td>< & +, +'9 $ ,*!-,' %3+ -,!$!2' + scope9 )- (*%!, !&!* +! $ $ + * $ !$'$'$-%&B<th scope="row"> 1 <th scope="col"> *+(,!.%&,C< '* ',* (*,9 !& $ ,!)-, <caption> (* +,$* $ $1& ' ,5,-$' -& ,$< ,!)-, '$'*+ !&%!,%&, +(-4+ $ ,!)-, <table> 1 ,$ +7$'(-!&$-!*-&,!)-, <caption>< <caption> $=$/#17*78-1#$7!- Atributos comunes ! 6)"16A)OV/=$:$/716 Atributos especficos G Tipo de elemento /-*/$ Descripcin $$.3-$35#$&)/)5--$=$/#17*78-1#$8/7!- +$5")")1OO $7$5.)/5$-"2#)'1 /$"$65)135"5$5-7!-48$6$.8$675$/-6)'8)$/7$).'$/B 86 ;;;C-)!516;$!C$6 /751#8"")2/ 3*78-1UC!-6 )'85UCQC!-6$/")--"1/"$-#6#$"!$"$5 7)-)>5-6"$-#6#$"!$"$5#1/#$6$/$"$65)1=0#)571#16-1675)!8716316)!-$6C +$5")")1OP $7$5.)/5 $- "2#)'1 /$"$65)1 35 "5$5 - 7!- 48$ 6$ .8$675 $/ - 6)'8)$/7$ ).'$/C 7)-)>5-6"$-#6#$"!$"$5#1/#$6$/$"$65)1=0#)571#16-1675)!8716316)!-$6C ;;;C-)!516;$!C$6 87 3*78-1UC!-6 /751#8"")2/ )'85UCRC!-"1/-165$68-7#16#$8/!9648$# + ,$+ '%($"+ +-$& !+('&* -& +,*-,-* !**-$* )- "-&, .*!+ '$-%&+ (* '*%* -& '$-%& & ' -& .*!+ !$+ (* '*%* -& !$ %3+ $, )- $+ %3+< * -+!'&*!$+''$-%&+9+-,!$!2&$'+,*!-,'+ rowspan 1 colspan *+(,!.%&,< +!-!&, !%& %-+,* -& ,$ '%($" )- -+!'&' '+ '$-%&+ +!%($+ (* '*%*-&'$-%&%3+& ; 88 ;;;C-)!516;$!C$6 /751#8"")2/ 3*78-1UC!-6 )'85UCSC+$.3-16$/")--1#$&86)2/#$"1-8./6 *',&*-&,$'%'$$!%&&,*!'*9+-,!$!2*$+!-!&,7!'; <table> <tr> <td colspan="2">A</td> </tr> <tr> <td>B</td> <td>C</td> </tr> </table> (*!%* !$ $ ,$ +,3 '*% +7$' ('* -& '$-%&9 %!&,*+ )- $ +-& !$ +,3 '*% ('* '+ '$-%&+< & (*!&!(!'9 ('*5 (&+*+ & -,!$!2* $ +!-!&, 7!' (*!&!*$,$; <table> <tr> <td>A</td> </tr> <tr> <td>B</td> <td>C</td> </tr> </table> !& %*'9 +! + -,!$!2 $ 7!' &,*!'*9 $ &.'* .!+-$!2 '*% !&'**, $ ,$9 1 )- $+ ,$+ & & !+('&* -& +,*-,-* *-$*< & ',*+ ($*+9 ,'+ $+ !$+ -& ,$ & ,&* $ %!+%' &8%*' '$-%&+< '* $' ,&,'9 +! + )-!*& %'+,** %&'+ '$-%&+ & -& !$9 + -+!'&& %!&, $ ,*!-,' colspan9 )- !&! $ &8%*''$-%&++!%($+)-.'-(*-&,*%!&$< & $ "%($' &,*!'*9 $ $ $ (*!%* !$ '-(* $ +(!' '+ '$-%&+ +!%($+9('*$')-$7!' +* <td colspan="2">A</td>< ;;;C-)!516;$!C$6 89 3*78-1UC!-6 /751#8"")2/ '*% )-!.$&,9 +! + )-!* !+6* -& ,$ )- -+!'& !$+ '%' $ $ +!-!&,!%&; )'85UCTC+$.3-16$/")--1#$&86)2/#$&)-6 $7!' )-+-,!$!2*(*',&*$,$$!%&&,*!'*+; <table> <tr> <td>A</td> <td rowspan="2">B</td> </tr> <tr> <td>C</td> </tr> </table> '*% &3$' $ -+!7& '$-%&+ $ "%($' &,*!'*9 $ -+!7& !$+ !&!*+ '*% +(!$< '%' $+ ,$+ ,!&& )- +* *-$*+9 ,'+ $+ '$-%&+ & ,&*$%!+%'&8%*'!$+<+59+!&$"%($'&,*!'*+-,!$!2*$+!-!&,7!'; <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> </tr> </table> ,$ &,*!'* &' + .!+-$!2*5 '**,%&,< '%' $ +-& '$-%& $ ,$ '-( $ +(!' $+ '+ !$+9 $ 7!' !&!* $*%&, )- + $ . '-(* '+ !$+9%&*)-,'+$+'$-%&+$,$-&,&'&$%!+%'&8%*'!$+< ,!$!2&' $'+ ,*!-,'+ rowspan 1 colspan9 + ('+!$ !+6* ,$+ ,& '%($"+ '%' $+ )- +%-+,*&&$'++!-!&,+"%($'+< "%($'-+!7&%8$,!($+'$-%&+; 90 ;;;C-)!516;$!C$6 /751#8"")2/ 3*78-1UC!-6 )'85UCUC+$.3-1"1.3-$+1#$&86)2/#$"1-8./6 $ 7!' &+*!' (* -+!'&* $+ '$-%&+ $ ,$ &,*!'* + %-+,* '&,!&-!7&; <html> <head><title>Ejemplo de columnas fusionadas</title></head> <body> <h1>Fusin de columnas</h1> <table> <tr> <td colspan="3">A</td> <td>B</td> </tr> <tr> <td>C</td> <td colspan="2">D</td> <td>E</td> </tr> <tr> <td colspan="4">F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> ;;;C-)!516;$!C$6 91 3*78-1UC!-6 /751#8"")2/ </tr> </table> </body> </html> "%($'-+!7&%8$,!($+!$+; )'85UCVC+$.3-1"1.3-$+1#$&86)2/#$&)-6 $7!' &+*!'(*-+!'&*$+!$+$,$&,*!'*+%-+,*'&,!&-!7&; <html> <head><title>Ejemplo de filas fusionadas</title></head> <body> <h1>Fusin de filas</h1> <table> <tr> <td>A</td> <td>B</td> <td rowspan="3">C</td> <td>D</td> </tr> <tr> <td rowspan="2">E</td> <td>F</td> <td rowspan="3">G</td> </tr> <tr> <td>H</td> </tr> <tr> 92 ;;;C-)!516;$!C$6 /751#8"")2/ 3*78-1UC!-6 <td>I</td> <td>J</td> <td>K</td> </tr> </table> </body> </html> +$5")")1OQ $7$5.)/5$-"2#)'1 /$"$65)135"5$5-7!-48$6$.8$675$/-6)'8)$/7$).'$/B )'85UCWC+$.3-1#$7!-"1/8/$6758"785"1.3-$+ .3-$5 -6 $7)48$76 <table>A <tr>A <td>A <th>A <caption> = -16 75)!8716 colspanA rowspanA abbrA scopeA summaryC ;;;C-)!516;$!C$6 93