Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
HTML - Parte2
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
* * HTML – Parte 2 - Tabelas Desenvolvimento de Interfaces Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Jemerson Fernando Maia UNIPAR – Universidade Paranaense Campus Toledo Agosto/2013 * * Tabelas O objetivo principal da construção de tabelas no desenvolvimento de páginas em HTML é apresentar as informações de forma tabular, mas também pode ser utilizada para melhorar a apresentação ou controlar melhor a localização de textos, imagens e outros elementos da página. * * Tabelas São formadas basicamente por 3 tags: <table></table> Especifica início e fim da tabela. <tr></tr> Significa linha da tabela (“table row”,) e define início e fim de uma linha na tabela. <td></td> Significa dados da tabela (“table data”) e define conteúdo da tabela, basicamente colunas/célula. Existe também a tag <th></th> que pode ser utilizado para definir o cabeçalho da tabela. * * Tabelas São formadas basicamente por 3 tags: <table></table> Especifica início e fim da tabela. <tr></tr> Significa linha da tabela (“table row”,) e define início e fim de uma linha na tabela. <td></td> Significa dados da tabela (“table data”) e define conteúdo da tabela, basicamente colunas/célula. Existe também a tag <th></th> que pode ser utilizado para definir o cabeçalho da tabela. * * Tabelas - exemplo <html> <head> <title>Exemplo uso de tabelas</title> </head> <body> <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> </body> </html> * * Tag <table> - Atributos Podemos definir alguns atributos para a tag table para melhorar a apresentação na página. align = “center, left, rigth” - alinhamento da tabela na página width = “valor” - comprimento da tabela podendo ser em px ou % height = “valor” - altura da tabela podendo ser em px ou % border = “2” – espessura linha da borda da tabela bgcolor = “cor em hexadecimal” - cor de fundo para a tabela bordercolor = “cor em hexadecimal” - cor da linha da borda tabela * * Tag <table> - Atributos background = “imagem.jpg” - define uma imagem de fundo para a tabela cellspacing = “valor“ - espaço entre as células cellpadding = “valor“ – distancia da borda para o conteúdo * * Tag <tr> - Atributos Podemos definir alguns atributos para a tag tr também. align = “center, left, rigth, justify” alinhamento horizontal do conteúdo das células da linha valign = “top, midle, bottom, baseline” alinhamento vertical do conteúdo das células da linha bgcolor = “valor” – cor de fundo para a linha (células da linha) * * Tag <td> - Atributos Podemos definir alguns atributos para a tag td também. align = “center, left, rigth, justify” alinhamento horizontal do conteúdo da célula valign = “top, midle, bottom, baseline” alinhamento vertical do conteúdo da célula width = “valor” comprimento da tabela podendo ser em px ou % height = “valor” altura da tabela podendo ser em px ou % bgcolor = “valor” – cor de fundo para a linha * * Tag <td> - atributo colspan colspan é a abreviação para "column span". colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula. <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> * * Tag <td> - atributo rowspan rowspan é a abreviação para “row span". rowspan é usada na tag <td> para indicar quantas linhas estarão contidas em uma célula. <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> * * Exercícios Crie uma página contendo uma tabela com 6 linhas e 3 colunas. Preencha as células com valores numéricos. Crie um página contendo uma tabela de 10 linhas e 2 colunas sendo que: a tabela ocupe 60% da página, a primeira coluna deverá ter comprimento de 30 pixels e deverá ser preenchido com valores numéricos. A segunda coluna deverá ser preenchido com nomes de frutas. Crie uma págna contendo uma tabela contendo duas colunas sendo que, a primeira coluna deverá conter três células e a segunda coluna apenas uma célula. Na primeira coluna deverá haver um link em cada uma das três células. Na segunda coluna, na única célula contida nela, deverá haver alguma imagem. * * Exercício extra Crie uma página contendo a tabela abaixo: * * Referências http://www.w3schools.com/html/default.asp http://www.criarweb.com/html/ http://pt-br.html.net/
Materiais relacionados
5 pág.
10 pág.
4 pág.
3 pág.
Compartilhar