The correct way to write HTML email templates: A practical summary compatible with Gmail / Outlook / QQ Mail

The Correct Way to Write HTML Email Templates#

In web projects, HTML email templates cannot be written like web pages.
Even if they display correctly in some clients (like QQ Mail), styles can easily break in Gmail and Outlook.

To ensure consistency in mainstream clients, there is only one practical approach.

Core Conclusion#

HTML email templates must use:

table as the layout structure
All styles written as inline style
Explicitly specify dimensions (width / padding / font-size)

This is currently the only stable solution compatible with Gmail, Outlook, Apple Mail, and QQ Mail.

Recommended Writing (Practical Rules)#

1. Use table for layout#

<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding: 24px;">
      Content area
    </td>
  </tr>
</table>

Avoid using div + flex / grid for layout.

2. All styles use inline style#

<p style="margin:0;font-size:14px;line-height:20px;color:#354052;">
  Body content
</p>

Do not rely on:

<style> tags
class / selector
external CSS

3. Image dimensions must be explicitly specified#

<img src="logo.png" width="68" style="display:block;width:68px;height:auto;" />

Avoid images being automatically enlarged or stretching the layout in some clients.

4. Design for the "worst client"#

Even if some clients support modern CSS, the rendering capabilities of Gmail / Outlook should be used as the minimum standard.

Conclusion#

HTML emails are not a web rendering environment.
Using table + inline style is not outdated; it is currently the only reliable engineering practice.

When emails need to reliably reach users, compatibility takes precedence over code "elegance."