Фон таблицы внутри ячейки заполнен неправильно

Я полностью новичок в создании HTML-тела, но мне нужно создать HTML-тело электронного письма, я должен поместить в эту таблицу сообщений электронной почты некоторые данные. Это довольно простая таблица с 2 строками и 4 столбцами, но есть 3 ячейки, которые нужно разделить. Итак, я создал таблицу (1 строка 2 столбца) внутри этой ячейки. И вот проблема, при заполнении этих новых ячеек "основная" ячейка заполняется неправильно, см. ниже. пример Как правильно заполнить. Буду признателен за код, который его заполнит. Мое тело html:

<table style = "text-align: center; padding: 8px; width: 600px;" border = "1" cellspacing = "0" cellpadding = "0">
<tbody>
<tr>
<td style = "width: 150px; text-align: center;">Done</td>
<td style = "width: 150px; text-align: center;">Success</td>
<td style = "width: 150px; text-align: center;">Overwrited</td>
<td style = "width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style = "font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table style = "height: 50px; width: 150px; text-align: center;" >
<tbody>
<tr>
<td style = "height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor = "#00cc00">{2}</td>
<td style = "height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor = "#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style = "width: 150px; ">
<table style = "height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style = "height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor = "#ee4c50">{4}</td>
<td style = "height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor = "#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style = "width: 150px;">
<table style = "height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style = "height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor = "#99ccff">{6}</td>
<td style = "height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor = "#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

И я хотел бы получить что-то вроде этого: пример

html email html-email

22.03.2019 17:20

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Все ваши <table> должны быть

<table cellspacing = "0" cellpadding = "0" border = "0">

это удалит лишние белые отступы<td>

<table cellpadding = "0" cellspacing = "0" border = "0" style = "text-align: center; padding: 8px; width: 600px;" border = "1"
  cellspacing = "0" cellpadding = "0">
  <tbody>
    <tr>
      <td style = "width: 150px; text-align: center;">Done</td>
      <td style = "width: 150px; text-align: center;">Success</td>
      <td style = "width: 150px; text-align: center;">Overwrited</td>
      <td style = "width: 150px; text-align: center;">Unrecognized</td>
    </tr>
    <tr>
      <td style = "font-size: 24px; font-weight: bold;">{1}</td>
      <td>
        <table cellpadding = "0" cellspacing = "0" border = "0" style = "height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style = "height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor = "#00cc00">{2}</td>
              <td style = "height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor = "#00cc00">{3}%</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style = "width: 150px; ">
        <table cellpadding = "0" cellspacing = "0" border = "0" style = "height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style = "height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor = "#ee4c50">{4}</td>
              <td style = "height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor = "#ee4c50">{5}%</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style = "width: 150px;">
        <table cellpadding = "0" cellspacing = "0" border = "0" style = "height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style = "height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor = "#99ccff">{6}</td>
              <td style = "height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor = "#99ccff">{7}%</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

25.03.2019 14:50

Другие вопросы по теме

Как правильно вставить изображение в html письмо

Как добавить второе вложение в этот код VBA для Excel?

Как читать или получать электронные письма из списка рассылки с помощью JavaMail API?

Письма, отправленные через мой адрес электронной почты, попадают в папку спама клиента

Функция почты php работает, но я не получаю никаких писем

Как я могу отправить электронное письмо с ошибкой groovy (com.sun.mail.smtp.SMTPSendFailedException: 530-5.5.1 Требуется аутентификация. Узнайте больше на)

Удаление нежелательных символов, которые нарушают readline()

Я получаю исключение MailKit.Security.SslHandshakeException при попытке подключения к smtp.office365.com

Laravel 5.4 Перенаправление сброса пароля аутентификации на основе адреса электронной почты

Проблема с электронной почтой в Outlook 554 5.2.0 SubmissionQuotaExceededException

Фон таблицы внутри ячейки заполнен неправильно

Ответы 1

Другие вопросы по теме

Похожие вопросы