05 01 tabelas2

189 visualizações

Publicada em

HTML5 Programming

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
189
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

05 01 tabelas2

  1. 1. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 1 <TABLE BORDER=1 RULES=NONE FRAME=BOX>
  2. 2. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 2 <TABLE BORDER=1 RULES=“NONE” FRAME=“VOID”>
  3. 3. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 3 <TABLE BORDER=1 FRAME=“ABOVE”>
  4. 4. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 4 <TABLE BORDER=1 FRAME=“BELOW”>
  5. 5. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 5 <TABLE BORDER=1 FRAME=“HSIDES”>
  6. 6. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 6 <TABLE BORDER=1 FRAME=“VSIDES”>
  7. 7. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 7 <TABLE BORDER=1 FRAME=“LHS”> LHS=Left Horizontal Side
  8. 8. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 8 <TABLE BORDER=1 FRAME=“RHS”> RHS=Right Horizontal Side
  9. 9. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 9 – só linhas <TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX >
  10. 10. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 10 – sem colunas exteriores <TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=HSIDES >
  11. 11. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 11 – só linhas entre as colunas <TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=COLS FRAME=BOX >
  12. 12. TABLE BORDERS ATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA • BORDER • FRAME • RULES Moldura Exterior Quais as molduras exteriores que são mostradas Quais as molduras interiores que são mostradas Exemplo 6 – só linhas verticais exteriores <TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=COLS FRAME=VSIDES >
  13. 13. TABLE BORDERS • Linhas entre grupos de linhas Grupo 1 Grupo 2 Grupo 3
  14. 14. TABLE BORDERS • Linhas entre grupos de linhas Thead Tbody Tfoot
  15. 15. TABLE BORDERS • Linhas entre grupos de linhas Thead Tbody Tfoot <TABLE CELLPADDING=6 RULES=GROUPS FRAME=BOX> <THEAD> <TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR> </THEAD> <TBODY> <TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR> <TR> < TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR> <TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR> <TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR> <TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR> <TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR> <TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR> </TBODY> <TFOOT> <TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR> </TFOOT> </TABLE> O atributo RULES tem de ser GROUPS V
  16. 16. TABLE BORDERS• Linhas entre grupos de colunas <TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>
  17. 17. Colgroups <TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX> <COLGROUP> </COLGROUP> <COLGROUP SPAN=3> </COLGROUP> As regras de formatação aplicam-se por grupos Subdividindo a tabela em áreas.
  18. 18. Bordercolor <TABLE BORDER=10 BORDERCOLOR=RED> <TR> <TD>carrots</TD> <TD>garlic</TD> </TR> <TR> <TD>celery</TD> <TD>onions</TD> </TR> </TABLE>
  19. 19. BorderColor Efeito 3d <TABLE BORDER=10 BORDERCOLORLIGHT=YELLOW BORDERCOLORDARK=BLUE> <TR> <TD>blah blah blah</TD> <TD>yeah yeah yeah</TD> </TR> <TR> <TD>whatever whatever</TD> <TD>right on!</TD> </TR> </TABLE>
  20. 20. Os 3 atributos de cor em simultaneo <TABLE BORDER=10 BORDERCOLOR="#0000FF" BORDERCOLORLIGHT="#33CCFF" BORDERCOLORDARK="#0000CC"> <TR> <TD>blah blah blah</TD> <TD>yeah yeah yeah</TD> </TR> <TR> <TD>whatever whatever</TD> <TD>right on!</TD> </TR> </TABLE>
  21. 21. TABELASExerc.1 <TABLE BORDER=2 CELLPADDING=2 background="fundo.jpg" width="50%" align="Center“ rules=“Groups”> <CAPTION>FNAC cellpading=2 Border=2 background="imagem" width="50%"</CAPTION> <THEAD> <TR> <TH COLSPAN=2 bgcolor="yellow"><Font Color="red">Vendas de Discos</Font></TH> </TR> </THEAD> ... .... <TABLE BORDER=2> Fnac
  22. 22. TABELASExerc.1 <TABLE BORDER=2 CELLPADDING=2 background="fundo.jpg" width="50%" align="Center“rules=“Groups”> <CAPTION>FNAC cellpading=2 Border=2 background="imagem" width="50%"</CAPTION> <THEAD> <TR> <TH COLSPAN=2 bgcolor="yellow"><Font Color="red">Vendas de Discos</Font></TH> </TR> </THEAD> ... .... ... CELLPADDING=2> ( Espaço Interior da célula) Fnac
  23. 23. TABELASExerc.1 <TABLE BORDER=2 CELLPADDING=2 background="fundo.jpg" width="50%" align="Center“rules=“Groups”> <CAPTION>FNAC </CAPTION> <THEAD> <TR> <TH COLSPAN=2 bgcolor="yellow"><Font Color="red">Vendas de Discos</Font></TH> </TR> </THEAD> ... .... Imagem de Fundo Fnac
  24. 24. TABELASExerc.1 <TABLE BORDER=2 CELLPADDING=2 background="fundo.jpg" width="50%" align="Center“rules=“Groups”> <CAPTION>FNAC </CAPTION> <THEAD> <TR> <TH COLSPAN=2 bgcolor="yellow"><Font Color="red">Vendas de Discos</Font></TH> </TR> </THEAD> ... .... Metade do comprimento do browser ou do contentor Fnac
  25. 25. TABELASExerc.1 <TABLE BORDER=2 CELLPADDING=2 background="fundo.jpg" width="50%" align="Center“rules=“Groups”> <CAPTION>FNAC </CAPTION> <THEAD> <TR> <TH COLSPAN=2 bgcolor="yellow"><Font Color="red">Vendas de Discos</Font></TH> </TR> </THEAD> ... .... Alinahmento ao centro Fnac
  26. 26. TABELASExerc.1 <TABLE BORDER=2 CELLPADDING=2 background="fundo.jpg" width="50%" align="Center"> <CAPTION>FNAC</CAPTION> <THEAD> <TR> <TH COLSPAN=2 bgcolor="yellow"><Font Color="red">Vendas de Discos</Font></TH> </TR> </THEAD> ... .... Fnac THEAD
  27. 27. TABELAS Exerc.1 <TBODY> <TR> <TD>Dave Matthews</TD> <TD ALIGN="center">Big Whiskey and the GruGux King</TD> </TR> <TR> <TD >Neko Case</TD> <TD ALIGN="center">Middle Cyclone</TD> </TR> <TR> <TD>Mark Knopfler</TD> <TD ALIGN="center">Get Lucky</TD> </TR> <TR> <TH COLSPAN=2><Font Color="Maroon">Vendas de DVDs</font></TH> </TR> <TR> <TD>Clint Eastwood</TD> <tD ALIGN="center">Grand Torino</TD> </TR> <TR> <TD>Martin Scorsese</TD> <TD ALiGN="CENTER">The Departed</TD> </TR> </TBODY> TBODY
  28. 28. TABELAS Exerc.1 <TBODY> <TR> <TD>Dave Matthews</TD> <TD ALIGN="center">Big Whiskey and the GruGux King</TD> </TR> <TR> <TD >Neko Case</TD> <TD ALIGN="center">Middle Cyclone</TD> </TR> <TR> <TD>Mark Knopfler</TD> <TD ALIGN="center">Get Lucky</TD> </TR> <TR> <TH COLSPAN=2><Font Color="Maroon">Vendas de DVDs</font></TH> </TR> <TR> <TD>Clint Eastwood</TD> <tD ALIGN="center">Grand Torino</TD> </TR> <TR> <TD>Martin Scorsese</TD> <TD ALiGN="CENTER">The Departed</TD> </TR> </TBODY> 1 1
  29. 29. TABELAS Exerc.1 <TBODY> <TR> <TD>Dave Matthews</TD> <TD ALIGN="center">Big Whiskey and the GruGux King</TD> </TR> <TR> <TD >Neko Case</TD> <TD ALIGN="center">Middle Cyclone</TD> </TR> <TR> <TD>Mark Knopfler</TD> <TD ALIGN="center">Get Lucky</TD> </TR> <TR> <TH COLSPAN=2><Font Color="Maroon">Vendas de DVDs</font></TH> </TR> <TR> <TD>Clint Eastwood</TD> <tD ALIGN="center">Grand Torino</TD> </TR> <TR> <TD>Martin Scorsese</TD> <TD ALiGN="CENTER">The Departed</TD> </TR> </TBODY> 2 2
  30. 30. TABELAS Exerc.1 <TBODY> <TR> <TD>Dave Matthews</TD> <TD ALIGN="center">Big Whiskey and the GruGux King</TD> </TR> <TR> <TD >Neko Case</TD> <TD ALIGN="center">Middle Cyclone</TD> </TR> <TR> <TD>Mark Knopfler</TD> <TD ALIGN="center">Get Lucky</TD> </TR> <TR> <TH COLSPAN=2><Font Color="Maroon">Vendas de DVDs</font></TH> </TR> <TR> <TD>Clint Eastwood</TD> <tD ALIGN="center">Grand Torino</TD> </TR> <TR> <TD>Martin Scorsese</TD> <TD ALiGN="CENTER">The Departed</TD> </TR> </TBODY> 3 3
  31. 31. TABELAS Exerc.1 <TFOOT> <TR> <TD colspan=“2”>Dados de 2009</TD> </TR> </TFOOT> 4
  32. 32. Tabelas • Atributo Scope Indicador para quem concebe a página <table border="1"> <tr> <th></th> <th scope="col">Month</th> <th scope="col">Savings</th> </tr> <tr> <td scope="row">1</td> <td>January</td> <td>$100</td> </tr> <tr> <td scope="row">2</td> <td>February</td> <td>$80</td> </tr> </table> </body> Cabeçalho para coluna Cabeçalho para coluna
  33. 33. Tabelas <html> <body> <table border="1" width="100%"> <tr> <th id="name">Name</td> <th id="email">Email</td> <th id="phone">Phone</td> <th id="addr">Address</td> </tr> <tr> <td headers="name">John Doe</td> <td headers="email">someone@example.com</td> <td headers="phone">+45342323</td> <td headers="addr">Rosevn 56,4300 Sandnes,Norway</td> </tr> </table> </body> </html> Identificador interno para os cabaçalhos e conteúdos

×