Daniel Carvalho - Web Designer

Compartilhando Conhecimentos

Criando um layout com Tabelas

Estaremos criando um modelo igual ao do exemplo abaixo, as tabelas antes de existirem CSS eram usadas para fazer a extrutura das páginas em geral.

Exemplo










Passo a Passo:

A extrutura acima contém 5 tabelas sendo a primeiro responsável apenas pelo alinhamento, segue abaixo como fazer esse exemplo de layout utilizando apenas tabelas.

Obs: para inserir uma tabela você clica na Guia Common na opção Table

















1. crie uma tabela com 1 linha, 1 coluna e 800 pixel de lagura.





















2. Após fazer isso clique dentro da tabela e crie agora outro tabela para o topo com as seguintes dimensões: 800 pixel de lagura, 1 linha e 1 coluna, mas com a altura de 150 pixel. Pra alterar a altura com a tabela selecionada use os botões












3. crie mais uma tabela com: 150 de lagura e 300 de altura, para o menu do modelo.

4. Após criada a tabela do menu, crie mais uma com 650 de lagura e 300 de altura, para a parte destinada ao conteudo do site.

Obs: para que a tabela do conteudo fique ao lado da tabela do menu, você deverá selecionar a tabela do menu e alinha-la a esquerda. igual a figura abaixo.








5. apos tudo isso falta apenas a tabela para o rodape do site. Crie uma tabela com 800 de lagura e 40 de altura para o rodape.

depois disso tudo selecione a primeira tabela e alinhe ela ao centro da pagina.

Obs: seguindo esse roteiro você pode fazer não apenas esse modelo indicado no inicio do Post, mas qualquer outro você também poderá fazer, solte sua criatividade.

Espero que gostem!!!

Um abraço a todos

Pesquisar este blog

Deixe seu recado, seu pedido de post.

Esse blog foi útil a você?

Seguidores