Alinhar Tabelas ao Centro em um E-mail Marketing

Jackadrn · Junho 14, 2012

Olá

Estou tentando criar um e-mail marketing mas não consigo alinhar a tabela com as imagens ao centro, elas insistem em se separar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Super Oferta - Pauta</title>
<style type="text/css">

.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.style5 {
font-size: 8px;
color: #000000;
}

body {
background-color: #fff;
background: url(https://www.pauta.com.br/malling/bg.jpg);
margin: 0;
padding: 0;
}

.style9, .style8 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.style9 {
color: #000000;
font-size: 12px;
}

.style8 {
color: #000000;
font-size: 16px;
}

.style9 a:link, .style9 a:visited  {
font-size: 14px;
color:#333333;
text-decoration: none;
}

.style9 a:hover, .style9 a:active  {
font-size: 14px;
color: #666666;
text-decoration: none;
}


</style>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr> 
	<td align="center" valign="top">
		<p><span class="style8"><strong>Caro parceiro <%NOME_FANTASIA%>, confira nossas ofertas!</strong></span></p><br/>
       </td>
</tr>











<table id="Table_01" width="800" height="4651" border="0" cellpadding="0" cellspacing="0" align="center">
   <tr>
	<td colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/geral_sc_1.jpg" width="800" height="10" border="0" alt=""></a></td>
</tr>
<tr>
	<td colspan="2" rowspan="2">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/geral_sc_2.jpg" width="707" height="124" border="0" alt=""></a></td>
	<td>
		<a href="http://www.youtube.com/tvpautabrasil">
			<img src="http://www.pauta.com.br/malling/youtube.jpg" width="30" height="30" border="0" alt="Youtube"></a></td>
	<td rowspan="2">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/geral_sc_3.jpg" width="12" height="124" border="0" alt=""></a></td>
	<td>
		<a href="https://www.facebook.com/pages/Pauta-Distribui%C3%A7%C3%A3o-e-Log%C3%ADstica/176135245787751?ref=ts">
			<img src="http://www.pauta.com.br/malling/facebook.jpg" width="30" height="30" border="0" alt="Youtube"></a></td>
	<td rowspan="2">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/geral_sc_4.jpg" width="21" height="124" border="0" alt=""></a></td>
</tr>
<tr>
	<td align="left">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/geral_sc_5.jpg" width="30" height="94" border="0" alt=""></a></td>
	<td align="left">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/geral_sc_6.jpg" width="30" height="94" border="0" alt=""></a></td>
</tr>
<tr>
	<td colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/bannerdiario.jpg" width="800" height="309" border="0" alt="Banner"></a></td>
</tr>
<tr>
	<td>
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_01.jpg" width="400" height="535" border="0" alt="Produto 1"></a></td>
	<td colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_02.jpg" width="400" height="535" border="0" alt="Produto 2"></a></td>
</tr>
<tr>
	<td>
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_03.jpg" width="400" height="542" border="0" alt="Produto 3"></a></td>
	<td colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_04.jpg" width="400" height="542" border="0" alt="Produto 4"></a></td>
</tr>
<tr>
	<td colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/bannerdiario_1.jpg" width="800" height="240" border="0" alt="Banner 1"></a></td>
</tr>
<tr>
	<td>
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_05.jpg" width="400" height="535" border="0" alt="Produto 5"></a></td>
	<td colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_06.jpg" width="400" height="535" border="0" alt="Produto 6"></a></td>
</tr>
<tr>
	<td>
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_07.jpg" width="400" height="542" border="0" alt="Produto 7"></a></td>
	<td colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_08.jpg" width="400" height="542" border="0" alt="Produto 8"></a></td>
</tr>
<tr>
	<td colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/bannerdiario_2.jpg" width="800" height="240" border="0" alt="Banner 2"></a></td>
</tr>
<tr>
	<td>
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_09.jpg" width="400" height="535" border="0" alt="Produto 9"></a></td>
	<td colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_10.jpg" width="400" height="535" border="0" alt="Produto 10"></a></td>
</tr>
<tr>
	<td>
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_11.jpg" width="400" height="532" border="0" alt="Produto 11"></a></td>
	<td colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=20104">
			<img src="http://www.pauta.com.br/malling/sex_sc_12.jpg" width="400" height="532" border="0" alt="Produto 12"></a></td>
</tr>
<tr>
	<td colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="http://www.pauta.com.br/malling/sex_sc_rodape.jpg" width="800" height="506" border="0" alt="Rodapé"></a>				    </td>
</tr>
<tr>
	<td>
		<img src="http://www.pauta.com.br/malling/spacer.gif" width="400" height="1" alt=""></td>
	<td>
		<img src="http://www.pauta.com.br/malling/spacer.gif" width="307" height="1" alt=""></td>
	<td>
		<img src="http://www.pauta.com.br/malling/spacer.gif" width="30" height="1" alt=""></td>
	<td>
		<img src="http://www.pauta.com.br/malling/spacer.gif" width="12" height="1" alt=""></td>
	<td>
		<img src="http://www.pauta.com.br/malling/spacer.gif" width="30" height="1" alt=""></td>
	<td>
		<img src="http://www.pauta.com.br/malling/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>










         <tr> <td align="center"><span class="style9"><br/>Caso não deseje mais receber e-mails de ofertas e novidades da Pauta</span> <span class="style9"><strong><a href="mailto:exclusao@pauta.com.br?subject=Nao desejo maiss receber e-mails da Pauta"><strong>Acesse esse link</strong></a></strong></span></td>
         </tr><br/>

         <tr><td align="center"><span class="style9">Caso não consiga visualizar esta imagem <a href="http://www.pauta.com.br/malling/sex_sc.jpg"><strong>Acesse esse link</strong></a></span></td>
         </tr><br/>

         <tr><td align="center"><span class="style9">Dúvidas  sobre faturamento direto <a href="http://www.pauta.com.br/malling/faturamento.swf"><strong>Acesse esse link</strong></a></span></td>
         </tr><br/>
</table>



</body>
</HTML>

Marco Bruno · Junho 14, 2012

Olá, Jackadrn.

Da uma olhada neste post:

http://wbruno.com.br/2011/09/22/como-recortar-email-marketing/

Esta bem explicado, se tiver qualquer dúvida pode perguntar de boas.

Sucesso!

Abraço.

Jackadrn · Junho 15, 2012

Olá

Bom, a primeira dica que ele dá, é pra não cortar na vertical. Mas eu preciso cortar na vertical, pra por um link em cada produto.

Obrigado

Thiago Moraes · Junho 16, 2012

Qual editor de imagem e html você está usando? Tem como você postar o link da página? Fica mais fácil te ajudar.

Outra coisa, é bom da uma pesquisada pq você não está seguindo as regras para esse tipo de e-mail...é certeza que ele vai ser tratado como spam.

William Bruno · Junho 16, 2012

Mas eu preciso cortar na vertical, pra por um link em cada produto.

não precisa não amigo.

Se você cortar na vertical, sem que esse corte respeite uma horizontal alinhada, então formará rowspans na tabela, e isso quebrará o layout em diversos clients de email.

Pense em recortes horizontais inicialmente, e depois destas linhas, você subdividirá verticalmente.

Jackadrn · Junho 19, 2012

Fiz uma imagem no Photoshop, cortei e exportei. Editor de html faz diferença? Bom usei Dreamweaver...

Como assim postar link da página? que página? É um e-mail marketing, qualquer cosia os links das imagens estão no código...

"Regras para esse tipo de e-mail"?

Como não preciso cortar na vertical? E subdividir vertical quer dizer o que? Eu cortei no Photoshop, ele seleciona retângulos, estão alinhados, se por acaso não estivessem alinhados, ele teria gerado outra imagem e ampliado o html default. Ou não?

Estou me confundindo ainda mais =/

William Bruno · Junho 19, 2012

você leu? http://wbruno.com.br/2011/09/22/como-recortar-email-marketing/

O problema é isso aqui amigo:

                <td rowspan="2">

faça recortes de forma que não hajam rowspans, apenas colspans.

Ok ?

Jackadrn · Junho 19, 2012

Eu li, mas como eu não sabia como fazer sem rowspan nem comentei.

Mas agora eu fiz sem e dá na mesma...

Thiago Moraes · Junho 19, 2012

"Regras para esse tipo de e-mail"?

Ficou claro que você não conhece, por isso te dei a dica...pesquise a respeito

Crie as slices no photoshop seguindo a dica do bruno e exporte para html. Se der erro poste o código novamente com as alterações.

Jackadrn · Junho 20, 2012

Tentei mais uma vez, com outro e-mail, corrigi várias coisas, segui algumas dicas mas a única diferença foi não conseguir nem mais alinhar ao centro a frase no topo...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Super Oferta - Pauta</title>
<style type="text/css">

.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.style5 {
font-size: 8px;
color: #000000;
}

body {
background-color: #fff;
background: url(https://www.pauta.com.br/malling/bg.jpg);
margin-left: 0px;
margin-top: 0px;
}

div {
background-color: #fff;
background: url(https://www.pauta.com.br/malling/bg2.jpg);
margin-left: 0px;
margin-top: 0px;
}

.style9, .style8 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.style9 {
color: #000000;
font-size: 12px;
}


.style8 {
color: #000000;
font-size: 16px;
}

.style9 a:link, .style9 a:visited  {
font-size: 14px;
color:#333333;
text-decoration: none;
}

.style9 a:hover, .style9 a:active  {
font-size: 14px;
color: #666666;
text-decoration: none;
}

img.b {
display: block;
}


</style>
</head>

<body>

<table align="center" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
   <tr> 
       <td align="center" valign="top">
		<p><span class="style8"><strong>Caro parceiro <%NOME_FANTASIA%>, confira nossas ofertas!</strong></span></p>
	</td><br/><br/>
</tr>





<table id="Table_01" align="center" width="800" height="2351" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td align="top" colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img class="b" src="https://www.pauta.com.br/malling/arcond_01.jpg" width="800" height="10" border="0" alt=""></a></td>
</tr>
<tr>
	<td align="top"  colspan="2">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="https://www.pauta.com.br/malling/arcond_02.jpg" width="707" height="30" border="0" alt=""></a></td>
	<td align="top" >
		<a href="http://www.youtube.com/tvpautabrasil">
			<img src="https://www.pauta.com.br/malling/youtube3.jpg" width="30" height="30" border="0" alt="Youtube"></a></td>
	<td align="top" >
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="https://www.pauta.com.br/malling/arcond_04.jpg" width="12" height="30" border="0" alt=""></a></td>
	<td align="top" >
		<a href="https://www.facebook.com/pages/Pauta-Distribui%C3%A7%C3%A3o-e-Log%C3%ADstica/176135245787751?ref=ts">
			<img src="https://www.pauta.com.br/malling/facebook3.jpg" width="30" height="30" border="0" alt="Facebook"></a></td>
	<td align="top" >
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img src="https://www.pauta.com.br/malling/arcond_06.jpg" width="21" height="30" border="0" alt=""></a></td>
</tr>
<tr>
	<td align="top"  colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img class="b" src="https://www.pauta.com.br/malling/arcond_07.jpg" width="800" height="403" border="0" alt=""></a></td>
</tr>
<tr>
	<td align="top" >
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=22184#">
			<img src="https://www.pauta.com.br/malling/arcond_1.jpg" width="400" height="476" border="0" alt="Produto 1"></a></td>
	<td align="top"  colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=22184#">
			<img src="https://www.pauta.com.br/malling/arcond_2.jpg" width="400" height="476" border="0" alt="Produto 2"></a></td>
</tr>
<tr>
	<td align="top" >
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=22184#">
			<img src="https://www.pauta.com.br/malling/arcond_3.jpg" width="400" height="475" border="0" alt="Produto 3"></a></td>
	<td align="top"  colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=22184#">
			<img src="https://www.pauta.com.br/malling/arcond_4.jpg" width="400" height="475" border="0" alt="Produto 4"></a></td>
</tr>
<tr>
	<td align="top" >
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=22184#">
			<img src="https://www.pauta.com.br/malling/arcond_5.jpg" width="400" height="476" border="0" alt="Produto 5"></a></td>
	<td align="top"  colspan="5">
		<a href="https://www.pauta.com.br/produtos?codMasterGrupo=0&idProduto=22184#">
			<img src="https://www.pauta.com.br/malling/arcond_6.jpg" width="400" height="476" border="0" alt="Produto 6"></a></td>
</tr>
<tr>
	<td align="top"  colspan="6">
		<a href="https://www.pauta.com.br/index1.jsp#">
			<img class="b" src="https://www.pauta.com.br/malling/arcond_rodape.jpg" width="800" height="480" border="0" alt="Rodape"></a></td>
</tr>
<tr>
	<td align="top" >
		<img src="https://www.pauta.com.br/malling/spacer.gif" width="400" height="1" alt=""></td>
	<td align="top" >
		<img src="https://www.pauta.com.br/malling/spacer.gif" width="307" height="1" alt=""></td>
	<td align="top" >
		<img src="https://www.pauta.com.br/malling/spacer.gif" width="30" height="1" alt=""></td>
	<td align="top" >
		<img src="https://www.pauta.com.br/malling/spacer.gif" width="12" height="1" alt=""></td>
	<td align="top" >
		<img src="https://www.pauta.com.br/malling/spacer.gif" width="30" height="1" alt=""></td>
	<td align="top" >
		<img src="https://www.pauta.com.br/malling/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>






         <tr>
         	<td align="center"><span class="style9"><br/>Caso não deseje mais receber e-mails de ofertas e novidades da Pauta</span> <span class="style9"><strong><a href="mailto:exclusao@pauta.com.br?subject=Nao desejo mais receber e-mails da Pauta"><strong>Acesse esse link</strong></a></strong></span>
           </td>
         </tr><br/>

         <tr>
         	<td align="center"><span class="style9">Caso não consiga visualizar esta imagem <a href="http://www.pauta.com.br/malling/arcond.jpg"><strong>Acesse esse link</strong></a></span>
           </td>
         </tr><br/>

         <tr>
         	<td align="center"><span class="style9">Dúvidas sobre faturamento direto <a href="http://www.pauta.com.br/malling/faturamento.swf"><strong>Acesse esse link</strong></a></span>
           </td>
         </tr><br/>



</table>
<div></div>
</body>
</html>

William Bruno · Junho 20, 2012

seguinte.. posta o layout, o jpg inteiro desse email.

vou recortar por aqui, para você ver.

Não use a tag <style>, ela não funciona bem em clients de email como o gmail.

mangakah · Junho 20, 2012

Só informando caso você não saiba, o MailChimp provê vários templates para MailMarketing:

http://mailchimp.com/resources/html-email-templates/

Você pode usá-los como base ou estudar o código deles, que pode ajudar a resolver o problema aí no seu template.

Jackadrn · Junho 21, 2012

O link da imagem está no código ^^

http://www.pauta.com.br/malling/arcond.jpg

E como assim não usar <style> não consigo pensar layout sem css...

Arquivado

Alinhar Tabelas ao Centro em um E-mail Marketing

Recommended Posts

Jackadrn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marco Bruno 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackadrn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackadrn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackadrn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackadrn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackadrn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante