TABELAS    Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO                LUCIANO.CRECENTE@ETEC.SP.GOV.BR
Tabelas   Tabelas são usadas para    apresentar "dados tabulares" , isto    é, informação que deva ser apresentada    em ...
Exemplo 1.<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>        Dis...
Será renderizado no navegador assim:Célula 1 Célula 2Célula 3 Célula 4       Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF....
Qual a diferença entre <tr> e <td>?   3 tags básicas são usadas para inserir    tabelas:   <table> começa e termina uma ...
Existem atributos? (Border)   Por exemplo, o atributo border que é usado para definir a espessura de uma    borda em volt...
Será renderizado no navegador assim:    Célula 1 Célula 2    Célula 3 Célula 4       Disciplina: PROGRAMAÇÃO PARA INTERNET...
Largura da tabela   Tal como fizemos com as imagens, podemos    definir width - largura - em pixels, para uma    tabela -...
Mais atributos?   Existe uma grande quantidade de atributos para    tabelas. A seguir mais dois:   align: define o alinh...
O que posso inserir em tabelas?   Teoricamente você pode inserir qualquer coisa em uma tabela:    texto, links e imagens....
Exercícios para fixação1. Crie a seguinte tabela, aplicando os atributos border,align, valign e width:PRODUTO             ...
Mais tabelas   O que mais existe?   Os dois atributos colspan e rowspan    são usados para criar tabelas    singulares....
Exemplo 1:   <table border="1">   <tr>   <td colspan="3">Célula 1</td>   </tr>   <tr>   <td>Célula 2</td>   <td>Cél...
Será renderizado no navegador assim:   Célula 1   Célula 2       Célula 3           Célula 4       Disciplina: PROGRAMAÇÃO...
Exemplo 2:<table border="1"><tr><td colspan="2">Célula 1</td><td>Célula 2</td></tr><tr><td>Célula 3</td><td>Célula 4</td><...
Será renderizado no navegador assim:    Célula 1                      Célula 2    Célula 3 Célula 4 Célula 5       Discipl...
Que tal rowspan?   Como você já deve ter concluido,    rowspan especifica quantas linhas    estarão contidas em uma célul...
Exemplo 3:<table border="1"><tr><td rowspan="3">Célula 1</td><td>Célula 2</td></tr><tr><td>Célula 3</td></tr><tr><td>Célul...
Será renderizado no navegador assim:                    Célula 2  Célula 1          Célula 3                    Célula 4  ...
Continuação...   No exemplo anterior rowspan é definido em "3" na    Célula 1. Isto especifica que uma célula deve conter...
Exercício 1   Crie a seguinte tabela. Atenção para a    posição dos valores dentro das células.       Peças              ...
Próximos SlideShares
Carregando em…5
×

Html básico 4 tabelas

2.462 visualizações

Publicada em

Criação de tabelas em HTML.

Publicada em: Educação
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
2.462
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
68
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html básico 4 tabelas

  1. 1. TABELAS Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  2. 2. Tabelas Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica. Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  3. 3. Exemplo 1.<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> Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  4. 4. Será renderizado no navegador assim:Célula 1 Célula 2Célula 3 Célula 4 Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  5. 5. Qual a diferença entre <tr> e <td>? 3 tags básicas são usadas para inserir tabelas: <table> começa e termina uma tabela. Evidente. <tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente. <td> significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente. Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  6. 6. Existem atributos? (Border) Por exemplo, o atributo border que é usado para definir a espessura de uma borda em volta da tabela: Exemplo 3:<table border="1"><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> Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  7. 7. Será renderizado no navegador assim: Célula 1 Célula 2 Célula 3 Célula 4 Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  8. 8. Largura da tabela Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela - ou alternativamente em percentagem da tela: Exemplo 4: <table border="1" width="30%"> Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela. Tente você mesmo. Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  9. 9. Mais atributos? Existe uma grande quantidade de atributos para tabelas. A seguir mais dois: align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita). valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo). Exemplo 5: <td align="right" valign="top">Célula 1</td> Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  10. 10. O que posso inserir em tabelas? Teoricamente você pode inserir qualquer coisa em uma tabela: texto, links e imagens... MAS, tabelas destinam-se a apresentar dados tabulares (isto é, dados que por sua natureza devam ser apresentados em linhas e colunas) então abstenha-se de colocar coisas dentro de tabela simplesmente porque você deseja que elas estejam próximas umas às outras. Nos primórdios da Internet - isto é, há poucos anos atrás - tabelas eram usadas como ferramenta para construir layout. Se você quer controlar a apresentação de textos e imagens, existe uma maneira bem mais racional (dica:CSS). Adiante veremos isto. Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  11. 11. Exercícios para fixação1. Crie a seguinte tabela, aplicando os atributos border,align, valign e width:PRODUTO QUANTIDADE VALOR UNITÁRIOPlaca mãe 5 R$ 250,00Processador 10 R$ 450,00Memória RAM 8 R$ 90,00 Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  12. 12. Mais tabelas O que mais existe? Os dois atributos colspan e rowspan são usados para criar tabelas singulares. Colspan é a abreviação para "column span". Colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula. Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  13. 13. Exemplo 1: <table border="1"> <tr> <td colspan="3">Célula 1</td> </tr> <tr> <td>Célula 2</td> <td>Célula 3</td> <td>Célula 4</td> </tr> </table> Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  14. 14. Será renderizado no navegador assim: Célula 1 Célula 2 Célula 3 Célula 4 Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  15. 15. Exemplo 2:<table border="1"><tr><td colspan="2">Célula 1</td><td>Célula 2</td></tr><tr><td>Célula 3</td><td>Célula 4</td><td>Célula 5</td></tr></table> Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  16. 16. Será renderizado no navegador assim: Célula 1 Célula 2 Célula 3 Célula 4 Célula 5 Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  17. 17. Que tal rowspan? Como você já deve ter concluido, rowspan especifica quantas linhas estarão contidas em uma célula: Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  18. 18. Exemplo 3:<table border="1"><tr><td rowspan="3">Célula 1</td><td>Célula 2</td></tr><tr><td>Célula 3</td></tr><tr><td>Célula 4</td></tr></table> Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  19. 19. Será renderizado no navegador assim: Célula 2 Célula 1 Célula 3 Célula 4 Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  20. 20. Continuação... No exemplo anterior rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve conter 3 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3 e Célula 4 formam duas linhas independentes. Assim, é sempre uma boa idéia, desenhar a tabela em uma folha de papel antes de começar a codificação HTML. Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR
  21. 21. Exercício 1 Crie a seguinte tabela. Atenção para a posição dos valores dentro das células. Peças Preço INFORMÁTICA HD 300,00 Disciplina: PROGRAMAÇÃO PARA INTERNET - PROF. LUCIANO LUCIANO.CRECENTE@ETEC.SP.GOV.BR

×