Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Painel de Usuario

Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Ter 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Sab 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Sab 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Sab 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último usuário registrado atende pelo nome de kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Novembro 2018
SegTerQuaQuiSexSabDom
   1234
567891011
12131415161718
19202122232425
2627282930  

Calendário Calendário

Visitou

Lição 10: Tabelas

Ir em baixo

Tutoriais Lição 10: Tabelas

Mensagem por konan em Sex 17 Jun 2011 - 8:26

Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica.
É difícil?


Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML.
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>



Será renderizado no navegador assim:
Célula 1Célula 2
Célula 3Célula 4

Qual a diferença entre <tr> e <td>?


Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags:
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.

Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com </table>.
Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:
Célula 1Célula 2
Célula 3Célula 4

Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.
Exemplo 2:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>
<tr>
<td>Célula 9</td>
<td>Célula 10</td>
<td>Célula 11</td>
<td>Célula 12</td>
</tr>
</table>



Será renderizado no navegador assim:
Célula 1Célula 2Célula 3Célula 4
Célula 5Célula 6Célula 7Célula 8
Célula 9Célula 10Célula 11Célula 12

Existem atributos?


Claro! existem atributos. 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>



Será renderizado no navegador assim:
Célula 1Célula 2
Célula 3Célula 4

A espessura da borda é especificada em pixels ([Você precisa estar registrado e conectado para ver este link.])
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.
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>



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.
Agora, coloque em prática tudo que você aprendeu e crie várias tabelas de diferentes tamanhos, usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.
avatar
konan
Uplouder
Uplouder

Respeito às regras : Respeito as regras 100%

Mensagens : 59
Reputação : 0
Data de inscrição : 13/06/2011
Idade : 26

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum