Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
aula_08
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
Jorge Ferreira Tabela que iremos criar Para começar a fazer uma tabela, precisamos seguir alguns passos. Mas antes você precisa saber a utilização das tabelas. Antigamente as tabelas eram muito utilizadas para fazer LayOut, e mais antigamente ainda os LayOuts eram feitos com FRAMER. Hoje em dia criamos os LayOuts com DIVS que vocês aprederem nas aulas anteriores e as tabelas são usadas para outras coisas. Usamos muito as tabelas para formatar os formulários. Quando você vê na internet um formulário de cadastro, bem feito, bem arrumado , não estando torto. Esse formulário foi criado usando tabelas. Criando uma tabela simples Para criar uma tabela primeiro utilizamos a tag <TABLE> ...</TABLE). Para criar as linhas dessa tabela utilizamos a tag <TR>...</TR> Para criar colunas para essa linha utilizamos a tag <TD>...</TD> Veja o exemplo: <table> <tr> <td> </td> <td> </td> </tr> </table> O exemplo ao lado se você executar no navegador, não aparecerá nada, pois as tags estão sem conteúdo. Mas essa é a estrutura básica de uma tabela. Criando uma tabela na prática <html> <head> <title>Tabelas</title> </head> <body> <form name="mkform"> <table> </table> </form> </body> </html> Abra seu editor HTML (bloco de notas ou DreamWeaver) e digite o código ao lado. Foi inserido uma tabela dentro das TAGS do formulário que você aprendeu em outras aulas. Hoje em dia a utilização da tabelas é mais voltada para formatar formulários. <html> <head> <title>Tabelas</title> </head> <body> <form name="mkform"> <table> <tr> </tr> </table> </form> </body> </html> Entre as tags <table>...</table>, insira duas outra tags: <tr>...</tr> Essas tags são usada para criar linhas. <body> <form name="mkform"> <table border="1"> <tr> <td>LOGIN</td> <td><input type = “text” /></td> </tr> <tr> <td>Senha</td> <td><input type = “password” /></td> </tr> <tr> <td><input type = “submit” value = “Enviar”/></td> <td><input type = “reset” value = “Limpar”/></td> </tr> </table> </form> </body> Ao lado nós temos um exemplo de tabela dentro de um formulário. Geralmente esse tipo de tabela é feito para dar acesso a sistema. Entre as tags <tr> que representam linhas, inserimos as tags <td> que representam COLUNAS. E entre as tags<td> que representam as colunas, inserimos campos de texto e na última linha dois botões. A tag <table border =“1” é para incluir uma borda. Veja como ficou!!! Criando uma tabela na prática Exercício: Formate a página criada para tabela, centralizando a tabela, inserindo uma cor de fundo na página e alterando a cor da fonte. Utilize CSS (folha de estilo em cascata) Criando tabela personalizadas Criando tabela personalizadas Você pode MESCLAR as células das colunas e das linhas, através dos comandos: Você pode mesclar (unir) as linhas com: <tr> <td rowspan="2"> </tr> Você pode mesclar (unir) as colunas com: <tr> <td colspan="2">ACESSO</td> </tr> Veja o código!! <html> <head> <title>Tabelas Personalizadas</title> </head> <body> <form name="mkform"> <table border="1"> <tr> <td colspan="2">ACESSO</td> </tr> <tr> <td>LOGIN</td> <td><input type = "text" /> </tr> <tr> <td>SENHA</td> <td><input type = "text" /> </tr> <tr> <td><input type = "submit" value = "Enviar"/></td> <td><input type = "reset" value = "Limpar"/></td> </tr> </table> </form> </body> </html> Veja como ficou!!! Neste exemplo foi mesclado a primeira linha utilizando o comando <td colspan="2"> Inserindo imagens em Tabelas Vamos preencher essa tabela com textos e imagens. Também vamos mesclar algumas células. Veja a tabela mesclada: linhas e colunas Mesclamos as linhas Veja o código!!! <html> <head> <title>Tabela</title> <link rel = "stylesheet" type = "text/css" href = "estilos/style.css"/> </head> <body> <h1>Tabela com imagens 2</h1> <table width="70%" border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" rowspan="2"> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html> Veja o código!!! This document was created with Win2PDF available at http://www.win2pdf.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only. This page will not be added after purchasing Win2PDF.
Continue navegando
Materiais relacionados
3 pág.
15 pág.
5 pág.
10 pág.
Perguntas relacionadas
Compartilhar