基礎知識（表格和內聯 CSS）
佈局表
HTML 電子郵件檔案的結構類似於網頁的結構：
<!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>
但是，基於 <div> 的 CSS 佈局在電子郵件中不起作用，就像在 Web 上一樣。主要的電子郵件客戶端既不支援浮點數和彈性框等內容，也不會以不同方式對其進行修改。<div>s 在不同的客戶端也有定位和盒子模型問題，特別是 Outlook。有一些 技術只使用 <div>s 來編寫電子郵件，但是堅持使用表格進行佈局會更安全。
<!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>
內聯 CSS
應用內聯樣式使其優先於更遠的樣式（例如 webmail 客戶端樣式），並且還可以解決從頭部或外部 CSS 檔案中去除 CSS 的電子郵件客戶端。內聯 CSS 是確保在每個電子郵件客戶端中保持一致顯示的最佳方式。
<!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>
你有幾個內聯 CSS 選項：