05 01 tabelas2
TRANSCRIPT
![Page 1: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/1.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 1<TABLE BORDER=1 RULES=NONE FRAME=BOX>
![Page 2: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/2.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 2<TABLE BORDER=1 RULES=“NONE” FRAME=“VOID”>
![Page 3: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/3.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 3<TABLE BORDER=1 FRAME=“ABOVE”>
![Page 4: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/4.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 4<TABLE BORDER=1 FRAME=“BELOW”>
![Page 5: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/5.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 5<TABLE BORDER=1 FRAME=“HSIDES”>
![Page 6: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/6.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 6<TABLE BORDER=1 FRAME=“VSIDES”>
![Page 7: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/7.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 7<TABLE BORDER=1 FRAME=“LHS”>
LHS=Left Horizontal Side
![Page 8: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/8.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 8<TABLE BORDER=1 FRAME=“RHS”>
RHS=Right Horizontal Side
![Page 9: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/9.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 9 – só linhas<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX >
![Page 10: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/10.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 10 – sem colunas exteriores<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=HSIDES >
![Page 11: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/11.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais 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 >
![Page 12: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/12.jpg)
TABLE BORDERSATRIBUTOS QUE DEFINEM OS LIMITES DE UMA TABELA• BORDER• FRAME• RULES
Moldura ExteriorQuais as molduras exteriores que são mostradasQuais as molduras interiores que são mostradas
Exemplo 6 – só linhas verticais exteriores<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=COLS FRAME=VSIDES >
![Page 13: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/13.jpg)
TABLE BORDERS
• Linhas entre grupos de linhasGrupo 1
Grupo 2
Grupo 3
![Page 14: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/14.jpg)
TABLE BORDERS
• Linhas entre grupos de linhasThead
Tbody
Tfoot
![Page 15: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/15.jpg)
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
![Page 16: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/16.jpg)
TABLE BORDERS• Linhas entre grupos de colunas<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>
![Page 17: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/17.jpg)
Colgroups
<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>
<COLGROUP></COLGROUP> <COLGROUP SPAN=3></COLGROUP>
As regras de formatação aplicam-se por gruposSubdividindo a tabela em áreas.
![Page 18: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/18.jpg)
Bordercolor
<TABLE BORDER=10 BORDERCOLOR=RED> <TR> <TD>carrots</TD> <TD>garlic</TD> </TR><TR> <TD>celery</TD> <TD>onions</TD> </TR></TABLE>
![Page 19: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/19.jpg)
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>
![Page 20: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/20.jpg)
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>
![Page 21: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/21.jpg)
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
![Page 22: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/22.jpg)
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
![Page 23: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/23.jpg)
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
![Page 24: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/24.jpg)
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
![Page 25: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/25.jpg)
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
![Page 26: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/26.jpg)
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>
...
....
FnacTHEAD
![Page 27: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/27.jpg)
TABELASExerc.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
![Page 28: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/28.jpg)
TABELASExerc.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
![Page 29: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/29.jpg)
TABELASExerc.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
![Page 30: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/30.jpg)
TABELASExerc.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
![Page 31: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/31.jpg)
TABELASExerc.1
<TFOOT> <TR>
<TD colspan=“2”>Dados de 2009</TD></TR>
</TFOOT>
4
![Page 32: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/32.jpg)
Tabelas• Atributo ScopeIndicador 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></html>
Cabeçalho para coluna
Cabeçalho para coluna
![Page 33: 05 01 tabelas2](https://reader031.vdocuments.mx/reader031/viewer/2022032222/55c1c97cbb61eba3298b465e/html5/thumbnails/33.jpg)
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">[email protected]</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