Estrutura de um site em tabelas

7 6 comentário(s)

Veja como e facil criar um site com tabelas

Nesse tutorial você aprenderá a utilizar tabelas.

A tabelas são utilizadas para você organizar sua página, com elas, seu site pode ficar milimetricamente perfeito, sem nenhum erro de alinhamento e de posição das imagens.



Para todos entenderem melhor, vamos montar a estrutura de um layout simples.

- Vamos inserir uma tabela, vamos chama-la de A.

- Clique no menu inserir / tabela ( ctrl+alt+t ).

- Uma janela aparecerá, e você deverá configura-la:



- Linhas: é o numero de linhas que a sua tabela terá,
nesse caso usaremos 3.

- Colunas: é o numero de colunas que a sua tabela terá,
nesse caso usaremos 3.

- Largura: é a largura da tabela (em pixels ou uma
porcentagem da página, ex: 90% da largura da página), nesse caso
usaremos 775px ou 78%.

- Preenchimento da célula: é o espaço
interno das células, nesse caso usaremos 0.

- Espacamento entre as células: é o espaço externo entre as células da tabela ( linhas e colunas ), nesse caso usaremos 0.

- Borda: é a largura da borda, nesse caso usaremos 0.

- Após inserir a tabela, você deverá arrastar a penúltima linha ( denominada linha A ) para baixo como mostra a figura:



- Feito isso, agora você irá arrastar as 2 colunas, a coluna B para a esquerda e a coluna C para a direita, como mostra a figura abaixo:



- Agora vamos fazer a parte do topo do site, para isso você irá unir as 3 células de cima da tabela e arrasta-las um pouco para baixo.

- Selecione as 3 células:



- Vá no menu Inspetor de propriedades ( Ctrl+F3) e clique em Mesclar as células selecionadas utilizando extensões:



- As 3 células se fundiram formando apenas uma célula.

- Faça o mesmo com as 3 células de baixo da tabela.

- Agora arraste-a um pouco para baixo:



Se você fez tudo certo, a estrutura do seu site ficou assim:




por favor comentem para que eu continue postando !

 

Comentários
Compartilhe com seus amigos:
Novidades
tópicos relacionados
Compartilhe com seus amigos:
últimos reviews
  • 6,4
    Review Nokia Lumia 635
    Testamos hoje o Smartphone Nokia Lumia 635. Confira abaixo o que achamos.
  • 8,1
    Review Samsung Galaxy S5
    O smarphone primogênito da família Galaxy é a evolução de seus descendentes, evolução porque não há grandes novidades, m...
  • 8,0
    Review Motorola Moto G Segunda Geração
    Conheça o novo Moto G, que substitui seu antigo modelo com uma performance ainda melhor



TOPO