Question 43329 in Html Question posted in
Some basic documentation can be found here.

How can I create a row with text to the left and text to the right that will be compatible with all email providers? – Html

I am trying to create the following design for an email:

<table align="center" width="600" border="0" cellpadding="10" cellspacing="0">
  <tr bgcolor="pink">
    <td align="left" width="50%" height="40px">
      Left Column Text
    </td>
    <td align="right" width="50%" height="40px">
      Right Column Text
    </td>
  </tr>
</table>

But it doesn’t work when forwarding the above table from Outlook to Gmail for example.
When I forward this email from Outlook, it adds extra elements to the <td>s:

<td align="left" width="50%" height="40px">
  <p align="right" style="text-align:right;">
    <span dir="RTL"> Some Text </span>
  </p>
</td>

And it makes the text align to the right on both columns. Why?

This is how it looks when forwarded from Outlook to Gmail: (Note that in the below example I manually changed the left column to align="right" just to mimic the behaviour)

<table align="center" width="600" border="0" cellpadding="10" cellspacing="0">
  <tr bgcolor="pink">
    <td align="right" width="50%" height="40px">
      Left Column Text
    </td>
    <td align="right" width="50%" height="40px">
      Right Column Text
    </td>
  </tr>
</table>
Tags:

3

Answers


  1. 0

    In Outlook you have to work with static pixels. The solution is to create an inner table specially for Outlook that does not appear to other email clients. Below you’ll find a starting point for email clients.

    It is important to style all elemnts inline (in the element tag) because some email clients remove the style in the <head> section.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns:v="urn:schemas-microsoft-com:vml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title></title>
<style type="text/css">
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
#outlook a { padding: 0px; }
</style>
<!--[if (mso)]>
<style type="text/css">
td { font-family: helvetica, arial, sans-serif !important; }
</style>
<![endif]-->
<base target=_blank>
</head>
<body bgcolor="#ffffff" style=" -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; margin:0; padding:0; width:100%" width="100%">
<table style="-premailer-cellpadding:0; -premailer-cellspacing:0; border-collapse:collapse; border-spacing:0; font-family:Helvetica, Arial, sans-serif; font-weight:300; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0" cellpadding="0" cellspacing="0">
<tr>
<td style="border-spacing:0; margin:0; padding:0 20px">
<!--[if (mso)]>
<table id="outlook" width="474" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; table-width:fixed;" align="center">
<tr>
<td class="outlooktd" style="width:474px !important;">
<![endif]-->
<table width="100%" id="mastbody" border="0" cellspacing="0" cellpadding="0" dir="ltr" style=" -premailer-cellpadding:0; -premailer-cellspacing:0; border-collapse:collapse; border-spacing:0; color:#444; font-family:Helvetica, Arial, sans-serif; font-weight:300; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0">
<tr>
<td bgcolor="#ffffff" style="border-spacing:0; margin:0; padding:0">
</td>

<!-- here your email content -->

<tr>
<td bgcolor="#ffffff" style="border-spacing:0; margin:0; padding:0">
</td>
</table>
<!--[if (mso)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Html emails are frustrating for anyone because there are so many email clients which show so many different results.

    I looked into some professional email layouts and they are several kilobytes to result in a cross email client output.

    Please try this (simplified) version with 2 columns (alignment left and right). Note that, for compatibilty reasons, the max width is set to 600px.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns:v="urn:schemas-microsoft-com:vml" dir="ltr">
<head>
</head>
<body style="margin: 0; font-family: sans-serif !important;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<base target=_blank>
<style type="text/css">
.ExternalClass {width:100%}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div {line-height:150%}
table {mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;border-collapse:collapse}
table td {border-spacing:0px;border-collapse:collapse;font-family: sans-serif !important}
a {text-decoration:none}
#outlook a {padding:0px;}
</style>

<table valign="top" border="0" cellpadding="0" cellspacing="0" style="margin: 0 !important; outline: 0; width: 100%; min-width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 24px; font-weight: normal; font-size: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000; margin: 0; padding: 0; border-width: 0;" bgcolor="#f7fafc">
  <tbody>
  <tr>
  <td valign="top" style="line-height: 24px; font-size: 16px; margin: 0;" align="left" bgcolor="#f7fafc">
    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
      <tbody>
      <tr>
      <td align="center" style="line-height: 24px; font-size: 16px; margin: 0; padding: 0 16px;">
        <!--[if (mso)]>
        <table align="center"><tbody><tr><td width="600">
        <![endif]-->
        <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
          <tbody>
          <tr>
          <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
            <div style="margin-right: -24px;">
              <table class="" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%;" width="100%">
              <tbody>
              <tr>
                <td style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0;" align="left" valign="top">
                  <p style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left">Text left align</p>
                </td>
                <td style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0;" align="left" valign="top">
                  <p style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="right">Text right align</p>
                </td>
              </tr>
              </tbody>
              </table>
            </div>
          </td>
          </tr>
          </tbody>
        </table>
        <!--[if (mso)]>
        </td></tr></tbody></table>
        <![endif]-->
      </td>
      </tr>
      </tbody>
    </table>
  </td>
  </tr>
  </tbody>
</table>

</body>
</html>
    Login or Signup to reply.
  3. 0

    I feel your pain on html emails. As per another answer, Outlook needs very exact html and requires that basically everything be a table (or cell) in order to be forced to "behave".

    I have inserted a middle td instead and have kept the alignment as left.

    Try also always using full inline style as well on every single element (as mentioned in another answer) as well as copying all the css into the head AND the body.

    I noticed that you weren’t always using style="" in your example and this may be required (do not quote me on that). However, I suspect that the lack of styling may be making gmail misbehave as you said it is adding its own. It seems to think there is a span but you did not write one, therefore try using parargaphs and styling each one instead of just putting text in the td.

    I added a bit more text just so I could see how it would look.

    <table width="600" border="0" cellpadding="10" cellspacing="0">
        <tr style="background-color: pink;">
          <td align="left" style="width: 30%; height: 40px;">
            <p style="text-align: left;">
              Left Column TextUt maxime incidunt qui nihil iusto et
              necessitatibus odit sit soluta totam vel aliquam maxime ut iure
              nulla aut quaerat soluta?
            </p>
          </td>

          <td style="width: 30%;"></td>

          <td align="left" style="width: 30%; height: 40px;">
            <p style="text-align: left;">
              Right Column Text.Ut maxime incidunt qui nihil iusto et
              necessitatibus odit sit soluta totam vel aliquam maxime ut iure
              nulla aut quaerat soluta?
            </p>
          </td>
        </tr>
      </table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search