Replace divs with tables in email template?

Question

I have my template setup as such and I'm wondering if I need to replace every div with a table.

Take the first div in my example. Do I really have to create a new table element followed by a and to have a banner? I've gathered that since colspan is not supported in html emails, I need to nest tables.

It just seems excessive to do this for each element but I want to make sure I'm following best practices.

<table class="wrapper">
    <div class="nl_banner">
      <?php 
        print render($content['field_nl_banner_image']);
        print $title;
      ?>
    </div>
    <div class="main">
      <?php print $date; ?>
      <div class="feature">
        <div class="feature_content">
          <h2 class="feature_title"><?php print $feature['nl_title'][0]['value']; ?></h2>
          <div class="feature_body"><?php print $feature['body'][0]['value']; ?></div>
        </div>
        <div class="nl_feature_image">
          <img src="<?php print $feature['nl_image']['url']; ?>" />
        </div>
      </div>

It's my understanding that (unfortunately) tables are the surest way to make sure your HTML emails are structured the way you want across all email clients, as not all of them render CSS the same way. — gtr1971, Mar 20 '14 at 15:56

score 1 · Accepted Answer · edited May 23 '17 at 10:31

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>

Replace divs with tables in email template?

1 Answers1