Skip to content Skip to sidebar Skip to footer
Home / Css / Email / Html / Mailchimp

100% Table Width For Html Email

Post a Comment
I am building an HTML email campaign using Mailchimp and my own HTML. I have heard that to build a successful HTML email you must focus on using tables, and use inline CSS. I have

Solution 1:

This will get you started:

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title></title><styletype="text/css">#outlooka {padding:0;}
    body{width:100%!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */.ExternalClass {width:100%;} .ExternalClass, .ExternalClassp, .ExternalClassspan, .ExternalClassfont, .ExternalClasstd, .ExternalClassdiv {line-height: 100%;} /* Hotmail */a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001!important; pointer-events: auto; cursor: default;}
    tabletd {border-collapse: collapse;}
  </style></head><bodyleftmargin="0"topmargin="0"marginwidth="0"marginheight="0"style="margin: 0px; padding: 0px; background-color: #FFFFFF;"bgcolor="#FFFFFF"><tablebgcolor="#252525"width="100%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><td><tablewidth="600"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdvalign="top"style="padding-top:30px; padding-bottom:30px;"><tablewidth="100%"border="0"cellpadding="0"cellspacing="0"bgcolor="#FFFFFF"><tr><td>
     content
    </td></tr></table></td></tr></table></td></tr></table></body></html>

This has the background set as white (#FFFFFF) so that if someone forwards it, they will be writing on white. You can change this to whatever, just keep in mind nobody wants to type on a dark color. The inner table (on the same line as the <body> tag) controls color of the html area background color (#252525). The content table is your center floated panel.

See this thread for a lot more info on html email.

Solution 2:

You can apply 100% width for table in html email

Also consider these things :

1 - Must include <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> in <head>.

2 - Apply mso-line-height-rule: exactly; at the <body>. Like, <body mso-line-height-rule:exactly;>

3 - Please avoid <ul> & <li> tags, you can use <p> or any other supporting tags. Use &bull; for bullet.

4 - Use <table> instead of <div>

5 - Use <b> instead of <strong>.

6 - Use nested tables, rather than rowspan or colspan.

Go to https://www.campaignmonitor.com/css/ for all kind of help in css for mailer

Solution 3:

By default, most browsers add margin to the BODY tag. Therefore you need

<bodystyle="background:blue;margin:0">

to get rid of that margin.

Solution 4:

Have you tried putting 

margin:0;

in the body style tag?

Post a Comment for "100% Table Width For Html Email"