Lay Em tabela
Início » Extras » Layout em Tabela

Bom, eu vou usar o html pronto, que peguei lá no Sinopse.Org, só vou ensinar como usar, porque assim como eu, algumas pessoas têm dificuldades em entender e arrumar o lay nesse html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body {
font-family : 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #656565;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 0;
text-align: center;
}

a {
text-decoration: none;
cursor: default;
}
a:link {
color: #E98391;
}
a:visited, a:active {
color: #E98391;
}
a:hover {
color: #FFB8BC;
text-decoration: underline;
border-bottom: 1px solid #E98391;
}
</style>
<title>SEUSITE.ORG</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<center>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<img src="http://seusite.org/imagem_do_layout.jpg">
</td>
</tr>
</table><table width="700" border="0" cellspacing="0" cellpadding="0" background="http://seusite.org/linha_do_layout.jpg">
<tr>
<td valign="top" width="5"><!? espaço entre a lateral esquerda do layout com o perfil ?></td>
<td valign="top" width="150">
<!? INÍCIO DO PERFIL ?>
escreva aqui tudo que você quer que apareça no perfil
<!? FIM DO PERFIL ?>
</td>
<td valign="top" width="5"><!? espaço entre o perfil e os posts ?></td>
<td valign="top" width="535">
<!? INÍCIO DOS POSTS ?>
coloque aqui as tags do seu sistema de blog pra gerar os posts
<!? FIM DOS POSTS ?>
</td>
<td valign="top" width="5"><!? espaço entre a lateral direita do layout com os posts ?></td>
</tr>
</table><table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img src="http://seusite.org/imagem_rodape.jpg"></td>
</tr>
</table>
</center>
</body>
</html>
Você deve fazer um lay com as seguintes partes: top(veja aqui como ficou o meu); Tira ou linha (Veja aqui ) e footer (Aqui).
Agora, repare no começo do lay. Onde tem < table width="700" border="0" cellspacing="0" cellpadding="0" > Nesse width=700, você vai colocar a largura do seu lay. É importante que todas as partes do lay(top, tira e footer) tenham a mesma largura, como o meu. Olhe aqui. Em todos os lugares que estiver com essa width="700", eu vou por a largura do meu lay que é 425,e você coloca a do seu. Portanto, são 3 lugares que eu tenho que colocar essa mesma medida.
Agora que você arrumou as medidas, hospede as imagens no seu servidor e substitua no html, nos seus devidos lugares. Seu lay está praticamente pronto.
Agora, arrume seu css do jeito que quiser, e as colunas não ficaram certas, antes do perfil e dos posts, onde tem isso: < td valign="top" width="5" > < !– espaço entre a lateral esquerda do layout com o perfil – >< /td > < td valign="top" width="150" >, edite, sendo 5, a distância do lay(esquerda), até a coluna do perfil, e width="150", a largura da coluna do seu perfil. O mesmo você faz antes dos posts. Olhe mais ou menos como ficou o meu: aqui.

« Voltar Topo