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 HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    #outlook a {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, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {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;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="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

<body style="background:blue;margin:0">

to get rid of that margin.


Solution 4:

Have you tried putting 

margin:0;

in the body style tag?


You may like these posts

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