如何在电子邮件模板中下车表格文本

时间：2018-11-13 15:38:30

标签： html html-email

如何更新电子邮件模板以使所有表格部分的文本向左对齐，请参见图像链接。表格列的标题和内容未对齐，标题的顶部居中，底部位于左侧。我不确定该在哪里解决该问题。任何帮助将非常欢迎。如果您有任何疑问或希望重新发送图像，请告诉我。

enter image description here 

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Learning Assignment Update</title>

  <style>
    /**This is to overwrite Outlook.com’s Embedded CSS************/
    
    html,
    body {
      margin: 0 auto !important;
      padding: 0 !important;
      height: 100% !important;
      width: 100% !important;
    }
    
    table {
      border-collapse: separate;
    }
    
    a,
    a:link,
    a:visited {
      text-decoration: none;
      color: #2BA6CB
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    h2,
    h2 a,
    h2 a:visited,
    h3,
    h3 a,
    h3 a:visited,
    h4,
    h5,
    h6,
    .t_cht {
      color: #9B301C !important
    }
    
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td {
      line-height: 100%
    }
    /**This is to center your email in Outlook.com************/
    
    .ExternalClass {
      width: 100%;
    }
    /* ------------------------------------- 
TYPOGRAPHY 
------------------------------------- */
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    p.lead {
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      line-height: 1.5;
      margin-bottom: 15px;
      color: #000;
    }
    
    h1 small,
    h2 small,
    h3 small,
    h4 small,
    h5 small,
    h6 small {
      font-size: 60%;
      color: #6f6f6f;
      line-height: 0;
      text-transform: none;
    }
    
    h1 {
      font-weight: 200;
      font-size: 44px;
    }
    
    h2 {
      font-weight: 200;
      font-size: 37px;
    }
    
    h3 {
      font-weight: 500;
      font-size: 27px;
    }
    
    h4 {
      font-weight: 500;
      font-size: 23px;
    }
    
    h5 {
      font-weight: 700;
      font-size: 17px;
    }
    
    h6 {
      font-weight: 900;
      font-size: 16px;
      text-transform: uppercase;
      color: #444;
    }
    
    p.lead {
      font-size: 17px;
    }
    /* My Table Styles */
    
    .myTable {
      font-family: Sans-Serif;
      font-size: 12px;
      /*margin: 20px;*/
      text-align: left;
      width: 100%;
    }
    
    .myTH {
      border-bottom: 2px solid #009999;
      color: #009999;
      font-size: 14px;
      font-weight: normal;
      padding: 10px 8px;
    }
    
    .myTD {
      color: #585858;
      padding: 9px 8px 0;
    }
    /* Odds and ends */
    
    .column {
      width: 300px;
      float: left;
    }
    
    .column tr td {
      padding: 15px;
    }
    
    .column-wrap {
      padding: 0!important;
      margin: 0 auto;
      max-width: 600px!important;
    }
    
    .column table {
      width: 100%;
    }
    
    .social .column {
      width: 280px;
      min-width: 279px;
      float: left;
    }
    
    table.social {
      /* padding:15px; */
      background-color: #ebebeb;
    }
    
    .social .soc-btn {
      padding: 3px 7px;
      font-size: 12px;
      margin-bottom: 10px;
      text-decoration: none;
      color: #FFF;
      font-weight: bold;
      display: block;
      text-align: center;
    }
    
    a.fb {
      background-color: #3B5998!important;
    }
    
    a.tw {
      background-color: #1daced!important;
    }
    
    a.gp {
      background-color: #DB4A39!important;
    }
    
    a.ms {
      background-color: #000!important;
    }
    
    .sidebar .soc-btn {
      display: block;
      width: 100%;
    }
  </style>

</head>

<body width="100%">
  <center style="width: 100%;">
    <tr>
      <td bgcolor="#ffffff" align="center" valign="top" width="100%">
        <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">


          <table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
            <tr>
              <td colspan="3" width="align=" center " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 ">&nbsp;</td>
 </tr>

  <tr>
          <td style="padding:0px;margin:0px; " width="560 ">


<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:5px;margin:0px;width:100%;background-color:#ebebeb; ">
<tr>
<td><img style="margin: 10px; height: 50px; width: 200px; " alt="Logo " src="https://wcb.benefitpad.com/wp-content/uploads/sites/8/2018/05/New-WCB-Logo.png " /></td>
<td align="right "><h6>Learning Assignment Update</h6></td></tr>
</table>


<table cellpadding="0 " cellspacing="0 " border="0 " width="100% ">
<tr>
<td style="height: 40px ">&nbsp;</td>
</tr>
<tr>
<td><h3>Hi <FIRST_NAME/>,</h3>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText1 "/><CPNTS_ADDED_ROLLUP/></p>
<p><table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Course Title</th>
<th scope="col " class="myTH ">Due Date</th>
</tr>

<LOOP>
<tr>
<td class="myTD "><CPNT_TYPE_ID_ADDED/></td>
<td class="myTD "><CPNT_ID_ADDED/></td>
<td class="myTD "><CPNT_TITLE_ADDED/></td>
<td class="myTD "><CPNT_DUE_DATE_ADDED/></td>
</tr></LOOP></table></LOOP>
</p>

<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText2 "/><CPNTS_MODIFIED_ROLLUP/></p>
<p><table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>

<LOOP>
<tr>
<td class="myTD "><CPNT_TYPE_ID_MODIFIED/></td>
<td class="myTD "><CPNT_ID_MODIFIED/></td>
<td class="myTD "><CPNT_TITLE_MODIFIED/></td>
</tr></LOOP></table></LOOP>
</p>

<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText3 "/><CPNTS_DELETED_ROLLUP/></p>
<p><table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>

<LOOP>
<tr>
<td class="myTD "><CPNT_TYPE_ID_DELETED/></td>
<td class="myTD "><CPNT_ID_DELETED/></td>
<td class="myTD "><CPNT_TITLE_DELETED/></td>
</tr></LOOP></table></LOOP>
</p>
</td>
</tr> 
<tr>
<td style="height: 40px ">&nbsp;</td>
</tr> 
<tr>
<td>
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF; ">
<tr>
</tr>
</table> 
</td>
</tr> 
<tr>
<td> 
<!-- column 1 -->
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:0px;margin:0px;width:100%;background-color:#ebebeb; ">
<tr><td valign="top ">
<table align="left " class="column " style="width:300px ">
<tr>
<td>
<p>Click below to get started or to visit Team Member Central:</p>
<p><strong><a href="https://plateau.com/ ">Get Started!</a></strong></p></td></tr>
</table><!-- /column 1 --></td>

</td>
<td style="padding:0px;margin:0px; ">&nbsp;</td>
</tr>
<tr><td colspan="3 " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 ">&nbsp;</td></tr>
</table>
<p>Contact your Human Resources for Questions. This email address in unattended. Please Do Not Reply.</p>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您需要重新开始并遵循正确的表结构。您的桌子一团糟，在您清理之前，真的很难提供帮助。

例如，这不是有效的表结构：

<tr>
  <td bgcolor="#ffffff" align="center" valign="top" width="100%">
    <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">

无效的原因是您在没有父<table>的情况下开始了表行。您没有关闭<tr>，<td>或<table>。

这是有效的基本表：

<table>
    <tr>
        <td>table cell a</td>
        <td>table cell b</td>
    </tr>
</table>

要么从头开始重新构建，要么使用像这样的html代码验证器：

http://jonaquino.blogspot.com/2013/05/unclosed-tag-finder.html

我建议从头开始。我只是觉得更简单。

默认情况下，<td>将使文本左对齐，<th>将使文本居中对齐。您没有看到这种行为，因为结构是一团糟。

此外，<LOOP>不是有效的html标记。即使是，您也不会在<LOOP></LOOP>的任何位置关闭它。

祝你好运。

相关问题
最新问题