Neste artigo vamos aprender a montar uma página usando tableless. O artigo mostrará passo a passo como você proceder.
Bem vamos lá, sem muito “enrolação”.
Abaixo os passos de criação da página:

PASSO 1 – “CRIANDO UM ARQUIVO .CSS”:
Vamos criar nosso arquivo com extensão “.css” e daremos o nome de “style.css”, ainda colocaremos o mesmo dentro de uma pasta chamada css. Conforme abaixo:



PASSO 2 – “ESTRUTURANDO O SITE”:
Agora vamos fazer a estrutura que queremos. Que será um topo, uma barra de navegação na esquerda do site e um conteúdo com o restante. Conforme a figura abaixo:



PASSO 3 – “CRIANDO O ARQUIVO INDEX.HTML”:
Depois de escolhida a estrutura, vamos ao arquivo index.html
OBS: Você deve criar este arquivo na raiz de seu site ou seja no mesmo nível em que se encontra a pasta css. Conforme figura:



Criamos a referência do estilo da seguinte maneira:



  
  
  
  
  
  
  

  


Agora vamos a criação das divs. Dentro das tags escreva:


    

        

            Cabeçalho
        

        

            
            

                
Conteúdo aqui

            

        

    



Onde: id=”body” é igual ao corpo externo da página; “top” é igual ao cabeçalho do site; “midle” é igual a todo conteúdo abaixo do topo; “menu” são os menus e “content” é igual ao conteúdo.

Vamos agora ao css para atribuir os estilos para estes objetos.

body { margin:0px; padding:0px; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:12pt; }

#body { width:779px; }

#top { width:779px; text-align:center; padding:50px 0px 50px 0px; float:left; background-color:#000000; color:#FFFFFF; font-size:22pt; }
#midle { width:779px; float:left }
#menu { width:150px; float:left; background-color:#CCCCCC; }
#content{ width:625px; padding:20px 0px 20px 0px; float:left; border:2px solid #CCCCCC;}


Após feito isto é só apreciar seu código.

O resultado final é algo parecido com isto:



Isso aí pessoal, até a próxima.