Tabelas

1,655 views

Published on

Aula para o 6to semestre da FAFIT. Aula de HTML sobre tabelas.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,655
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tabelas

  1. 1. Tabelas
  2. 2. Tabelas <ul><li>     Utilizamo-as apenas para mostrar dados tabulares, ex.: excel. Não deve ser usada para ajudar na composição do layout. A não utilização de tabelas para adequar objetos na tela chama-se tableless. </li></ul>
  3. 3. TAGS <ul><li>     Necessitamos basicamente de 3 tags para criar uma tabela: </li></ul><ul><li><table> </li></ul><ul><li>     <tr> </li></ul><ul><li>             <td>  </td> </li></ul><ul><li>                     </li></ul><ul><li>     </tr> </li></ul><ul><li></table> </li></ul>
  4. 4. <table> <ul><li>     Nossa tag <table> serve para começar e finalizar a tabela. Sempre será a primeira a ser aberta e a última a ser fechada. </li></ul>
  5. 5. <tr> <ul><li>     Significa &quot;table row&quot; - linha de tabela - começa e termina e uma linha horizontal da tabela.  </li></ul>
  6. 6. <td> <ul><li>     Significa &quot;table data&quot; - dados da tabela. começa e termina cada célula contida nas linhas da tabela.  </li></ul>
  7. 7. Cabeçalho e rodapé <ul><li>     A tabela nos da capacidade de criarmos cabeçalho e rodapé. Para isso usamos as tags <thead> e <tfooter> não esquecemos de usar <tbody> para o corpo da tabela. </li></ul>
  8. 8. Tabela <ul><li>     A tabela nos da capacidade de criarmos cabeçalho e rodapé. Para isso usamos as tags <thead> e <tfooter> não esquecemos de usar <tbody> para o corpo da tabela. </li></ul>
  9. 9. Tabela <ul><li>ex.: www.suissacorp.com.br/fafit/aula/tabela.html </li></ul>
  10. 10. Atributos <ul><li>background:  permite-nos colocar um fundo para a tabela </li></ul><ul><li>border : define o valor da borda em px </li></ul><ul><li>bordercolor : define a cor da borda </li></ul><ul><li>bgcolor : define a cor de fundo </li></ul><ul><li>width : largura, pode ser em, px ou % </li></ul><ul><li>height : altura, pode ser em, px ou % </li></ul><ul><li>cellpadding : margem interna da célula, em px </li></ul><ul><li>cellspacing : margem externa da célula, em px </li></ul><ul><li>align : alinhamento horizontal </li></ul><ul><li>valign : alinhamento vertical </li></ul><ul><li>colspan : utiliza o espaço setado em colunas </li></ul><ul><li>rowspan : utiliza o espaço setado em linhas </li></ul>
  11. 11. Exercício <ul><li>Fazer uma tabela igual: </li></ul>
  12. 12. Exercício 2 <ul><li>Fazer uma tabela igual: </li></ul>

×