HTML Tables Guide: Elements, Attributes and Examples
•Transferir como PPTX, PDF•
0 gostou•384 visualizações
HTML5
Recomendados
Mais conteúdo relacionado
Semelhante a HTML Tables Guide: Elements, Attributes and Examples
Semelhante a HTML Tables Guide: Elements, Attributes and Examples (20)
Mais de Vasco Ferreira
Último
Último (20)
HTML Tables Guide: Elements, Attributes and Examples
- 1. TABELAS HTML
- 3. ELEMENTOS <TABLE> <TR> <TD> </TABLE> INICIO DE UMA LINHA DA TABELA (TABLE ROW = <TR>)
- 4. ELEMENTOS <TABLE> <TR> <TD>Célula 1</TD> </TR> </TABLE> Conteúdo de uma célula TD = TABLE DATA
- 5. ELEMENTOS <TABLE> <TR> <TD>Célula 1</TD> <TD>Célula 2</TD> </TR> </TABLE> INICIO DE UMA LINHA DA TABELA
- 6. ELEMENTOS <TABLE> <TR> <TD>Célula 1</TD> <TD>Célula 2</TD> </TR> <TR> <TD>Célula 3</TD> <TD>Célula 4</TD> </TR> </TABLE>
- 7. Exercício Crie a seguinte tabela: Janeiro 100 Mês Poupança Fevereiro 110
- 8. Exercício Crie a seguinte tabela: Janeiro 100 Mês Poupança Fevereiro 110 Substituir: <td>Mês</td> Por <th>Mês</th>
- 9. ATRIBUTOS DAS CÈLULAS ou da TABELA ALIGN • Left • Center • Right <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html>
- 10. ATRIBUTOS DA TABELA • BORDER=“NONE” • BORDER=n <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html>
- 11. ATRIBUTOS DA TABELA • ALIGN=“RIGHT” • ALIGN=“CENTER” • ALIGN=“LEFT” <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html>
- 12. ATRIBUTOS <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> Th = Table Header
- 13. ATRIBUTOS DAS CÉLULAS • Th • Td <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> Th = Table Header Td = Table Data
- 14. ATRIBUTOS DAS CÉLULAS • Th • Td <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> TD = Table Data
- 15. ATRIBUTOS DAS CÉLULAS • Th • Td <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> <TR> = TABLE ROW = LINHA DA TABELA
- 16. ATRIBUTOS DAS CÉLULAS • Th • Td <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> <TR>= Nova linha da Tabela
- 17. <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> ATRIBUTOS DAS CÉLULAS • Th • Td 1ª e 2ª Célula da 2ª Linha
- 18. <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> ATRIBUTOS DAS CÉLULAS • Th • Td Fim da 2ª Linha
- 19. <html> <table border=“1” align=“right”> <tr> <th>Mês</th> <th>Poupança</th> </tr> <tr> <td>Janeiro</td> <td>100 Eur</td> </tr> <tr> <td>Fevereiro</td> <td>70 Eur</td> </tr> </table> </html> ATRIBUTOS DAS CÉLULAS • Th • Td Fim da Tabela
- 20. Exercício Crie a seguinte tabela com e sem linhas:
- 21. Solução <table cellspacing="0" cellpadding="3" border="1" width="400" align="center"> <tr> <td colspan="2" align="center"> <font size="5"><b><i> Fresh Fruits</i></b> </font> </td> </tr> <tr> <td>It has long been known that a diet that includes at least a few servings of fresh fruit every day will help keep you healthy, fit and trim.</td> <td><img src="fruitbowl.gif" width="170" height="91" border="0" alt="Fruitbowl"> </td> </tr> </table>
- 22. CABEÇALHOS HORIZONTAIS <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
- 23. CABEÇALHOS VERTICAIS <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table>
- 24. THEAD, TFOOT, TBODY <body > <table border=1 rules="groups"> <thead> <tr> <th>Nome</th> <th>Apelido</th> </tr> </thead> <tbody> <tr> <td>Jorge</td> <td>Borges</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> <tr> </tbody> <tfoot> <th>Julio</th> <th>Ferreira</th> </tfoot> </table> </body>
- 25. ATRIBUTOS • BORDER • BORDER = NONE • BORDER = VALOR <TABLE BORDER>
- 26. ATRIBUTOS • BORDER • BORDER = NONE • BORDER = VALOR CELLSPACING – ESPAÇO ENTRE AS CÉLULAS DA TABELA <TABLE BORDER CELLSPACING=2> <TABLE BORDER CELLSPACING=10>
- 27. ATRIBUTOS • BORDER • BORDER = NONE • BORDER = VALOR CELLPADDING – ESPAÇO ENTRE AS CÉLULAS DA TABELA <TABLE BORDER CELLPADDING=1> <TABLE BORDER CELLPADDING=10>
- 28. ATRIBUTOS • ColSpan – nº de colunas ocupadas por uma célula • RowSpan – nº de linhas ocupadas por uma célula Colspan=2 Colspan=2
- 29. ATRIBUTOS <TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2>Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2>Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE> Colspan=2 Colspan=2
- 30. MUDAR COR FUNDO CÉLULA <TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>
- 31. ROWSPAN <TABLE BORDER=2 CELLPADDING=4> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>
- 32. Tabela dentro de Tabela
- 33. Tabela dentro de Tabela Tabela Principal
- 34. Tabela dentro de Tabela Tabela Interior
- 35. Tabela dentro de Tabela <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr>
- 36. Tabela dentro de Tabela <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr>
- 37. TABLE BORDERS <TABLE BORDER> <TABLE BORDER=10>
- 38. TABLE CAPTION <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>
- 39. Exercício
- 43. Exercício <table cellspacing="0" cellpadding="2" border="3" > <tr> <td align="center" colspan="6">
- 45. Exercício <tr> <td align="center" colspan="6"> <font size="5"><i><b>My tech stock picks</b></i></font></td> </tr>
- 46. Exercício TR TD TD TD TD TD TD
- 47. Exercício <tr> <td><font size="2"><b>NAME</b></font> </td> <td align="center"> <font size="2"><b>SYMBOL</b></font> </td> <td align="center"> <font size="2"><b>CURRENT</b></font> </td> <td align="center"> <font size="2"><b>52WK HI</b></font> </td> <td align="center"> <font size="2"><b>52WK LO</b></font> </td> <td align="center"> <font size="2"><b>P/E RATIO</b></font> </td> </tr>
- 48. Exercício TR TD TD TD TD TD TD
- 49. Exercício <tr> <td>Microsoft</td> <td align="center">MSFT</td> <td align="center">86-3/8</td> <td align="center">119-15/16</td> <td align="center">75-1/2</td> <td align="center">56.09</td> </tr> <tr> <td>Cisco Systems</td> <td align="center">CSCO</td> <td align="center">72-1/8</td> <td align="center">82</td> <td align="center">24-13/16</td> <td align="center">400.69</td> </tr>
- 50. Exercício <tr> <td>America Online</td> <td align="center">AOL</td> <td align="center">63</td> <td align="center">95-13/16</td> <td align="center">38-15/32</td> <td align="center">350.00</td> </tr>
- 51. Exercício <tr> <td>Qwest Communications</td> <td align="center">Q</td> <td align="center">44-7/16</td> <td align="center">66</td> <td align="center">25-3/4</td> <td align="center">74.06</td> </tr>
- 52. Exercício <tr> <td>Dell Computers</td> <td align="center">DELL</td> <td align="center">53-59/64</td> <td align="center">59-11/16</td> <td align="center">31-3/8</td> <td align="center">86.97</td> </tr> </table>