Search code examples
htmlhtml-email

HTML email: tables or divs?

Does the HTML/CSS for an html email newsletter need to be in table format, or can I use DIVs with equal assurance it will display well cross email-client? I've downloaded a number of templates to see how they're done, upon which to base my own, and they all seem to use tables.

Any insight much appreciated, thanks!

Solution

  • ⚠️ Update 2021-06-10: This is a very old answer. I'm not sure how accurate it is 10 years after it was written. Mail clients are hopefully more compliant today ⚠️

    When it comes to email HTML, note that all best practices from web development goes out the window. To make the look consistent, you should:

    1. Use table based layouts
    2. Use the old-school attribute styling for tables
    3. Use ONLY inline-styles, and only very simple such. <style>-tags are discarded by many clients.
    4. Skip using <html>, <head> and <body> - They will be discarded by most clients anyway.
    5. If you embed images, try to make sure that the e-mail looks decent even if images are not loaded. Many clients require the user to mark the email as "safe" before displaying images.

    You can read more detailed versions of the above points here: