05 01 tabelas2
TRANSCRIPT
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>
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”>
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”>
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”>
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”>
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”>
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
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
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 >
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 >
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 >
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 >
TABLE BORDERS
• Linhas entre grupos de linhasGrupo 1
Grupo 2
Grupo 3
TABLE BORDERS
• Linhas entre grupos de linhasThead
Tbody
Tfoot
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
TABLE BORDERS• Linhas entre grupos de colunas<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>
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.
Bordercolor
<TABLE BORDER=10 BORDERCOLOR=RED> <TR> <TD>carrots</TD> <TD>garlic</TD> </TR><TR> <TD>celery</TD> <TD>onions</TD> </TR></TABLE>
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>
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>
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
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
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
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
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
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
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
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
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
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
TABELASExerc.1
<TFOOT> <TR>
<TD colspan=“2”>Dados de 2009</TD></TR>
</TFOOT>
4
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
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