Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 793
HandiworkNYC.com Avatar asked May 29 '10 14:05

HandiworkNYC.com


People also ask

Which is better div or table in HTML?

TABLEs are the correct technology for tabular data. DIVs are the correct technology for page layout and defining objects on the page (along with other block-level objects, i.e. heading, paragraphs, ul tags etc.). Use them both and use them well.

Why do HTML emails use tables?

Why do emails use HTML tables? For anyone not familiar with the basics of coding emails, nearly every marketing or transactional email is coded using HTML tables. Tables are a feature of HTML that allow designers and developers to code tabular data into web documents—or emails.

Should you still use tables in HTML?

You should only use tables for tabular data, and tabular data generally looks like something you might display in a spreadsheet or possibly a database. However, HTML5 changed the rules and now tables for layout, while not recommended, are considered valid HTML.

Why are tables the preferred option for creating layouts in HTML email?

The main reason tables are still used nowadays is to support Outlook 2007/2010/2013. Those versions use Microsoft Word engine to render HTML, and it's quite a mess. It has a limited support for CSS (no float or position for example), and some CSS properties are only supported on some specific HTML elements.


2 Answers

⚠️ 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:

  • http://articles.sitepoint.com/article/code-html-email-newsletters
  • http://dennisdeacon.wordpress.com/2008/06/09/top-10-email-best-practices/
  • http://www.catswhocode.com/blog/best-practices-for-coding-html-emails
like image 140
PatrikAkerstrand Avatar answered Sep 23 '22 19:09

PatrikAkerstrand


Like everyone here has said, use tables and inline all your css... but there is an ecosystem of email apps to help you build emails.

I've been using Mailrox (https://www.mailrox.com/) for most of my email builds recently and it seem to be pretty damm good and outputting perfect HTML emails, if you're building one from a design, even though it's in beta.

You could also try pre-built templates from Mailchimp or Campaign Monitor, but it sounds like you have a design for your email so maybe Mailrox would be best.

If you really want to get into building emails I'd say forget most of what you know about modern webdesign and master table layouts and use the links from PatrikAkerstrand.

Litmus is also great for testing your hand-coded designs. They give you previews of your email in (pretty much) all the email clients.

Hope this helps.

like image 25
MintDeparture Avatar answered Sep 24 '22 19:09

MintDeparture