In Part 4 of our video series on creating HTML emails we show you how to add text to the email using tables and also style the text using inline CSS.
We’ve included the code here so that you can copy it and use it to make your own HTML emails:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Demo Email</title> </head>
<body> <table width="100%" style="max-width: 600px;"> <tr> <td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Hi Anne,</td> </tr> <tr> <td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae feugiat ex. Donec eleifend viverra justo. Nam velit arcu, imperdiet sed ante sed, bibendum finibus erat. Maecenas ut elementum odio.</td> </tr> <tr> <td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris est lectus, fermentum nec turpis at, dictum eleifend dolor.</td> </tr> <tr> <td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: left; width: 45%;">Heading 1</td> <td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: right; width: 45%;">Heading 2</td> </tr> <tr> <td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: left; width: 45%;">Pellentesque dui magna, maximus ut diam eu, aliquam vehicula sapien. Suspendisse sed auctor libero. Integer id velit consectetur.</td> <td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: right; width: 45%;">Sed in euismod odio. Mauris pulvinar sem erat, vitae suscipit nisl tincidunt a. Vivamus sed tempus metus, at dignissim ligula.</td> </tr> <tr> <td width="100%" style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px;">Best regards,</td> </tr> <tr> <td width="100%" style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px;">John Doe</td> </tr> </table> </body>
</html>
Tables
All the content of the email is contained within a table with each paragraph of text being placed in its own table row:
<tr></tr>Where text is in two columns the table row contains two table data cells:
<td></td>Each cell contains the column’s text. The columns are given a width of 45% and floated left and right - note that a width of 50% wouldn’t give any spacing between the columns and therefore a smaller width is used.
Styling
Inline CSS is used throughout - CSS stylesheets are never used for HTML emails.
The table width is set to 100% and the max-width is also set to 600 pixels. This allows the email to be responsive - on large screens the email will be 600 pixels wide while on small screens such as smart phones the email will adjust to fill the width of the screen.
The text is styled to make it look good - the font-family, font-size, text colour and padding are all set using inline styles. These styles are applied to all table data cells.
For a full explanation please see this short video: