HTML изображения электронной почты

Question

Я только что сдал домашний экзамен на работу в качестве разработчика электронной почты.Моя задача - сделать все возможное, чтобы создать письмо в формате HTML из файла .png.Я использую таблицы, и я пришел в раздел, где я должен вставить изображение рядом с текстом, и я сбою и горения.Текст заголовка слишком смещен от абзаца, и изображение не очень хорошее;у кого-нибудь есть идеи как решить проблему?Мой код выглядит следующим образом:

       
div #costume-section {
    
    width:645px;
    height: 225px;
    padding-left: 05px;
    background: #ff821d;
    color: white;    
           
}

 <div id="costume-section">
         <table>
             <th id="cos-font">Costume Contest</th>
             <tr>
               <td>Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on)  We'll hold a kid contest too!</td>
                 <td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png"  /></td>
             </tr>
         </table>
     </div>

Answer 1

? Рахельдев

Думайте об этом, как будто вы работаете в электронной таблице. Вы установили th и tr строку таблицы.

Поскольку у вас есть текст заголовка вне строки, связывающейся с 2 td, текст заголовка находится поверх tr, содержащего текст и изображение.

Для перестановки разметки таблицы вам не нужно th в этом сценарии, если только это не является обязательным требованием.

 <div id="costume-section">
         <table>
             <tr>
               <td>
               <h1>Costume Contest</h1>
               Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on)  We'll hold a kid contest too!</td>
                 
                 <td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png"  /></td>
             </tr>
         </table>
     </div>