Capítulo 7. Tablas
Anuncio
/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
