Home » Extras » Template em Tabela

Esse tutorial vai ensinar vocês a fazer um layout assim como o meu em tabela as vantagens dele eh que da pra deixar ele centralizado mais facil de fazer pois eh só copiar o código e colar no seu HTML.


Use o seguinte html pra fazer o seu layout em tabelas. Vai ficar como o exemplo mas sem as linhas pretas e os fundos vermelhos:

Imagem do inicio
  Perfil Posts  
Imagem do fim



<!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.COM</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>

Mas se você quer um igual ao meu copie este codigo e cole em seu HTML. atenção ele não vai ficar exatamente como no exemplo este exemplo é só uma demostração:


Perfil
Imagem Topo
Posts
Imagem fim

<!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.COM</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 width="7" valign="top">&nbsp;</td>
<td width="190" valign="top"><!– INÍCIO DO PERFIL –>
escreva aqui tudo que você quer que apareça no perfil
<!– FIM DO PERFIL –></td>
<td width="503" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img src="http://seusite.org/imagem_do_layout.jpg"></td>
</tr>
<tr>
<td valign="top"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><!– INÍCIO DOS POSTS –>
coloque aqui as tags do seu sistema de blog pra gerar os posts
<!– FIM DOS POSTS –></td>
</tr>
</table></td>
</tr>
</table></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>

 

  Guitriches © 2006-2008                                Powered by Wordpress -  Assine!