Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use a DIV in an email template?

I am greatly confused about designing an email template for a mailchimp campaign. I want to know if I can use a div with a class of "Container" on my email template. Is using div tags supported by all mail clients? I am using DIV only for the container but in the inner part of the template I have used table, tr and td tags. Please let me know.

Thanks.

like image 306
Crookbud Avatar asked Feb 20 '14 06:02

Crookbud


People also ask

Do DIVS work in Outlook?

Inline CSS is applied to style the divs and their content, in much the same way as a <td> within a standard HTML email table. Structural styles, such as width , are not rendered by versions of Microsoft Outlook, as the divs themselves are not recognised or rendered by Microsoft Outlook.

Can I use style tag in email template?

Yes you can. However you have to keep in mind that few email clients respect css standards. Just stick to basic css properties like margin and padding , etc., and it should all be fine. Also you can style your html elements inline ( <div style=""> ) though it's not an elegant solution.

Can we use internal CSS in email template?

When you're designing an HTML template to use in the classic email editor, you can style your email by including CSS in the head section of your email. Learn more about styling your template in the inspector. Please note: this method requires a basic understanding of HTML.

Can I use Flexbox in email template?

Flexbox or Grid Layout<div> is supported in 100% of today's email clients, so no issues there.


2 Answers

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.

like image 119
John Avatar answered Oct 03 '22 11:10

John


There is no specifications for layout using table-less nor tables. However, using tables is the preferred way as it renders all at once. This aligns with how email templates render; while div's render separately. If you use div's include your css inline to the template as some clients do not support external css.

like image 42
Harish Boke Avatar answered Oct 03 '22 10:10

Harish Boke