HTML Email: Tables or Divs

HTML email: tables or divs?

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

Use table based layouts
Use the old-school attribute styling for tables
Use ONLY inline-styles, and only very simple such. <style>-tags are discarded by many clients.
Skip using <html>, <head> and <body> - They will be discarded by most clients anyway.
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

Why are tables used in HTML emails?

It's not really about blocking CSS as Shivan says, but rather about CSS support of email clients. Outlook and Thunderbird render CSS2.1 very differently.

To put it another way, emails clients are stuck at 1995 when it comes to rendering CSS. So we're stuck with having pages like we did in 1995 to have them look the same everywhere: table layouts.

Can I use a DIV in an email template?

You can use div, however tables are supported more consistently. If you try to go the div route, you'll find some of your CSS will fail.

Also, by going with tables, it opens up the old school html attributes that only work in tables. These include align, valign, bgcolor etc, all of which are 100% supported, while their CSS equivalents have partial support.

On a side note, here are all the resources you will need to get started in html email.

Replace divs with tables in email template?

colspan is supported in html email, however it is usually easier to nest tables in most scenarios.

You should always use tables if you want a consistent result.

Not sure your intended layout, but this is a basic example of nesting tables:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#999999">
      ...
    </td>
  </tr>
  <tr>
    <td>
      <!-- nesting another table is just like a colspan -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50%" bgcolor="#444444">
            ...
          </td>
          <td width="50%" bgcolor="#777777">
            ...
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Can you mimic the float right of a div with HTML Tables?

First, it should be pointed out that this isn't the natural behaviour in email clients.

You're going to see issues somewhere because you're effectively hacking together a solution. More detail below...

Points to consider:

As I commented on some of the previous answers - Divs can mimic what you want, but in Outlook, divs will blow out to 100%. Fixes such as calc widths etc aren't the solution to fix this. Tables will absolutely do the exact same job, without the drawback of having to add hack fixes such as Ghost tables just for Outlook.
Try not to use floats in email. They may work in some places but won't work everywhere. The align attribute (e.g. align="right") is what you're looking for. It's best to define these on table cells and the content inside will inherit this property, but when working with more than one table inside of the cell, it's best to define directly on the element.
You can see this in my code below... My table is next to a group of text. Defining the align on the cell would force the text to right align, not great!
Because this isn't the natural behaviour, you're going to see an issue somewhere.

In the case of the code below, this removes the reliance on floats, divs and calc widths and uses tables and fixed widths, although these can be changed to percentages.

However, the group of text is messing with the colspan and widths of the table cells in Outlook. Specifically, it is blowing out the first cell, throughout the table and so it isn't adhering to the fixed with of 316px you've defined.

*FYI - I've used a Litmus account to test this code in the big email clients including Gmail webmail, Gmail App (iOS), Outlook 2010/2013/2019, Outlook webmail, Outlook 365, Yahoo Webmail, Outlook App (iOS) and Apple Mail App (iOS).

<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000; border-collapse:collapse; width:100%;">

    <tr>

      <td style="width:316px; font-size:0; padding:0; border:1px solid #000;"><img width="316" height="159" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g" style="display:block;" /></td>

      <td style="border:1px solid #000; padding:3px;">Email Title</td>

    </tr>

      

    <tr>

      <td style="padding:3px; border:1px solid #000;">Date</td>

      <td style="padding:3px; border:1px solid #000;">Content</td>

    </tr>

    

    <tr>

      <td colspan="2" style="padding:3px; border:1px solid #000;">

          

        <table align="right" border="0" cellspacing="0" cellpadding="0" style="width:272px;">

            <tr>

                <td style="padding:3px; background:#000; color:#fff;">

                    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">

                        <tr>

                            <td>

                              TOC

                            </td>

                        </tr>

                        <tr>

                            <td>

                              Related Links

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

          

        Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content

      </td>

    </tr>

      

    <tr>

      <th colspan="2" style="padding:3px; border:1px solid #000;">Footer Info</th>

    </tr>

</table>

Newsletter Design to send in emails, using tables or table less

This is a good place to start:
http://www.campaignmonitor.com/design-guidelines/

Or in general:

http://www.campaignmonitor.com/resources/category-archive/cat/designing-and-building-emails/

PS: I've no relation with the site but I do think the articles are really useful though some are dated a few years ago.

2012 html emails - tables, divs and @media

Recently my company was changing their emails layout. First we decided to test the compatibility of different email clients with the newest html/css standards. However, during the coding process we encountered many problems with proper rendering which forced us to turn back to table-based layout.

We also used @media-queries and more sophisticated styling for clients able to understand them, but unfortunately tables are still the way to go if you want to support popular mail clients. It's a pity that so many business clients use old Outlook or similar.

After the work was done, we were testing our layouts with Campaign Monitor Tester but it wasn't enough so we had to test many clients manually.

Summing up: If I was to code an email layout now, I'd go with tables and inline styles.

Edit: Brackets-notation is correct, but I don't see the point. Moreover in this example it will only match elements with exactly one class named classname. It won't match <p class="classname othername">. If there's no other arguments for using it here, I'd go with standard dot notation (.classname).

HTML Email: Tables or Divs