Как зажечь текст таблицы в шаблоне электронной почты - PullRequest
Новая
       6

Как зажечь текст таблицы в шаблоне электронной почты

0 голосов
/ 13 ноября 2018

Как мне обновить шаблон электронной почты, чтобы выровнять тексты всех разделов таблицы слева, см. Ссылку на изображение.Заголовок и содержимое столбцов таблицы не выровнены, верхняя часть заголовка центрирована, а нижняя - слева.Я не уверен, где исправить проблему.Любая помощь будет приветствоваться.Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы, или вы хотите, чтобы изображение было отправлено повторно.

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 голосов
/ 13 ноября 2018

Вы должны начать все сначала и следовать правильной структуре таблицы. Ваши столы в беспорядке, и до тех пор, пока вы их не очистите, вам действительно трудно помочь.

Например, это недопустимая структура таблицы: 

<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>.

Удачи.

...