Como usar a tabela na codificação de E-mails html?
Tenho um projecto de factura que reproduzi em html. Aqui está o violino.
os excertos da tabela html que usei no violino são:
<table style="width:100%;display: flex;
justify-content: center;">
<tbody style="font-size:20px;padding-left: 15%;">
<tr>
<td style="padding-bottom: 3%;text-align:right;">how many</td>
<td style="padding-bottom: 3%;padding-left: 10%;">2</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">when:</td>
<td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
width: 300px;" >March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">who:</td>
<td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
</tr>
</tbody>
</table>
Declaração Do Problema:
pergunto-me se a tabela que usei acima é a forma correcta de usar no e-mail html ou se há alguma alteração que eu precise de fazer ? A razão pela qual eu estou perguntando isso porque eu nunca codificei emails html antes.
0
1 answers
Usar o Flex em html-e-mails não é totalmente suportado pelo Gmail, yahoo, outlook.com verifique estas duas ligações úteis abaixo:
Se você seguir a abordagem de layout normal da tabela seria suportado pela maioria dos clientes de E-mail, como eu notei que você também usou <div>
tag que irá levantar uma bandeira também.
display: flex
:
<html>
<body>
<p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="mobile" style="margin: 0 auto;" align="center">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style=" font-size:20px; padding: 0 0 0 15%;">
<tr>
<td style="padding-bottom: 3%;text-align:right;">type:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">what</td>
<td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">how many</td>
<td style="padding-bottom: 3%;padding-left: 10%;">2</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">when:</td>
<td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
width: 300px;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">who:</td>
<td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
</td>
</tr>
<tr style="text-align: left;margin-left: auto;width: 50%;padding-right: 0%; margin-right: auto;color:#484848;font-size:20px;" class="steps">
<td>
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
1
Author: Adam, 2018-06-15 12:20:41