Power Duckets
Olá,Caro Visitante!
quer ter a permissão de ver Link's Fazer Tutoriais
e Saber mas sobre o fórum? Registre-se Já O melhor conteúdo encontra-se aqui

Já é um Membro?
Logue-se e faça parte do nosso Mundo de Lazer.

Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Administrador
Administrador
Localização Localização : Chiado
Ver perfil do usuáriohttp://power-duckets.forumfacil.net

Lição 10: Tabelas

em Dom Jul 07, 2013 2:55 am
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:

Código:

<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 1 Célula 2
Célula 3 Célula 4



Qual a diferença entre <"tr> e <"td> (sem aspas)?

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:


  1. <"table> começa e termina uma tabela. Evidente.
  2. <"tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente.
  3. <"td> significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente.

(sem as aspas)

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> (sem as aspas). 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> (sem as aspas).

Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células












Célula 1 Célula 2
Célula 3 Cé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:

Código:
<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 1 Célula 2 Célula 3 Célula 4
Célula 5 Célula 6 Célula 7 Célula 8
Célula 9 Célula 10 Célula 11 Cé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:

Código:
<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 1 Célula 2
Célula 3 Célula 4


A espessura da borda é especificada em pixels (Ver Lição 9).

Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela - ou alternativamente em percentagem da tela:

Exemplo 4:

Código:
<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:

Código:
<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.


seta Olá Usuário,primeiro de Tudo leia Nossas Regras

seta Precisa de ajuda vá em Ajuda e Suporte

seta Acesse nosso Formulário Staff

-----------------------------------------------------------

Sign


     
               
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum