email Getting started with email The Basics (Tables and Inline CSS)
Example
Tables for Layout
The structure of an HTML email file is similar to that of a web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
However a <div>-based CSS layout doesn’t work in email as it does on the web. Major email clients either offer no support for things like floats and flexbox, or mangle it in different ways. <div>s also have positioning and box model issues in different clients, particularly Outlook. There are a few techniques to code an email using only <div>s, but it’s safer to stick with tables for layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Inline CSS
Applying a style inline gives it priority over styles further away (such as webmail client styles), and also works around the email clients that strip out CSS from the head or external CSS files. Inline CSS is the best way to ensure consistent display in every email client.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
You have a couple of options for inlining CSS:
- Write CSS inline as you go
- Use local snippets in your editor
- Use a web-based CSS inliner like this one
- Use a programmatic CSS inliner like this one
- Use a build process like this one or a templating language
- Let your email service provider handle the inlining for you (if they support it)
