Я хочу перекрыть кнопку на нижнем колонтитуле, используя стандартную структуру таблицы W3, я создаю шаблон электронной почты и должен работать в Outlook - PullRequest
Новая
       31

Я хочу перекрыть кнопку на нижнем колонтитуле, используя стандартную структуру таблицы W3, я создаю шаблон электронной почты и должен работать в Outlook

0 голосов
/ 30 сентября 2019

и пытаюсь создать шаблон электронной почты, но я понятия не имею, как создать этот дизайн, и у меня нет хороших знаний в структуре таблицы. Пожалуйста, найдите прикрепленное изображение. enter image description here

Я играю с этим кодом. 

<table border="0" cellpadding="10" cellspacing="0" width="600" id="service-with-smile">
  <tr>
    <td valign="top" align="center">
      <h2>Lorem ipsum </h2>
      <p> Lorem ipsum dolor aim</p>
    </td>
  </tr>
  <tr>
    <td>											
      image
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tbody>
          <tr>
            <td><a href="tel:+919876543210">Call Us</a></td>
          </tr>
        </tbody>
      </table>
    </td>

    <td>
      <table>
        <tbody>
          <tr>
            <td><a href="mailto:info@getTREAD.com">Email Us</a></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>

  <tr style="background-color: #ED1F24;">
    <td align="center">
      footer layer
    </td>
  </tr>
 </table>

1 Ответ

0 голосов
/ 30 сентября 2019

Не идеально, и, возможно, потребуется некоторая настройка, чтобы заставить его корректно отображаться в определенных почтовых провайдерах - но взгляните на это. 

<table border="0" cellpadding="10" cellspacing="0" width="600" id="service-with-smile">
  <tr>
    <td valign="top" align="center" colspan="2">
      <h2>Lorem ipsum </h2>
      <p> Lorem ipsum dolor aim</p>
    </td>
  </tr>
  
  <tr>
    <td>											
      image
    </td>
  </tr>
  
  <tr style="position:relative; display:block; margin:0 auto; top:20px; text-align:center;">
    <td colspan="1" align="right" style="display:inline-block; margin:auto;">
      <table>
        <tbody>
          <tr>
            <td>
              <a style="border:1px solid #ED1F24; padding:10px 20px; border-radius:20px; background:white; color:#ED1F24; font-weight:bold; text-decoration:none;">Call Us</a>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    
    <td colspan="1" align="left" style="display:inline-block; margin:auto;">
      <table>
        <tbody>
          <tr>
            <td>
              <a style="border:1px solid #ED1F24; padding:10px 20px; border-radius:20px; background:white; color:#ED1F24; font-weight:bold; text-decoration:none;">Email Us</a>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>

  <tr style="background-color: #ED1F24;">
    <td colspan="2" align="center">
      footer layer
    </td>
  </tr>
</table>

JSFiddle

...