100% table width for html email

Question

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 removed all padding from my styles and added in 0 measure to margin, padding, border and outline tags. Any suggestions guys? Really stuck with this.

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

<div id="wrap" style="background:green; width:100%;">

<table width="100%">
<tr>
  <td style="
      width:100%; margin:0; padding:0; border:0; outline:0;
      height:100px;
      background:#4b86fc;
      background-size:60px 60px;
      ">
    </td>
  </tr>
</table>

<table width="500" align="center">
<tr>
  <td style="
      padding:20px 0px 25px 0px;
      color:#000; font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:12px;">
      <p>Hi,</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Many Thanks, 
Liam</p></td>
  </tr>
</table>

<table width="100%">
<tr>
  <td style="
      width:100%; margin:0; padding:0; border:0; outline:0;
      background-color:#ebebeb;
      background:#ebebeb;
      border-top:1px solid #c3c3c3;
      font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:11px;
      text-align:center;">
        <ul style="list-style-type:none; margin:0; padding:0;">
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Homepage</a></li>
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Twitter</a></li>
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Dribbble</a></li>
        <li style="display:inline; padding:0 0 0 8px;"><a href="" style="text-decoration: none;     color:#545454;">Facebook</a></li>
</ul>

</td>
</tr>
</table>

</div>

</body>

I like this quote: _"I have heard that to build a successful HTML email you need to 'design like it's 1997'"_. Now where did this idea come from? :) — summea, Apr 02 '14 at 18:29
@summea: probably microsoft, when they decided to use Word's rendering engine in Outlook. If you think IE was bad for html, Word's almost makes adobe pagemill look good. — Marc B, Apr 02 '14 at 18:32
I have read in several posts, blogs and tutorials, similar extracts like this one 'Didn’t we abandon non-semantic table-based designs ages ago? Yep, and now you get to experience the joy all over again. Unfortunately, most email clients don’t support a plain old CSS layout like you’re used to. Instead, it’s back to the 90s and familiarizing yourself with cellspacing.' — user3380148, Apr 02 '14 at 18:34
You could also add margin: 0 !important; within the head. Could you describe the problem you're facing? You ask for help but don't tell us what the issue is. — Eoin, Nov 16 '16 at 17:54
also in the head you could add table, table td {border-collapse: collapse;} which helps in Outlook. — Eoin, Nov 16 '16 at 17:55
5 years later came here and still have to design emails like there were no changes since 20 years... no `div`, simple set `width` to `table` doesn't work in Outlook 2016, no fonts I can add from web and then these `mso-*` classes... — Matthias Burger, Jan 14 '20 at 09:37
Have you had a look at [html email boilerplate](http://htmlemailboilerplate.com/) Excellent template for... HTML Email! I know this is not a direct answer to the problem, but I can't post comments yet, sorry. — Jeggs, Apr 02 '14 at 19:02

score 6 · Answer 1 · edited May 23 '17 at 12:07

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.

Bijeesh E K · Answer 2 · 2019-11-15T06:59:35.737

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 • 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

score 1 · Answer 3 · answered Apr 02 '14 at 18:32

1

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.

answered Apr 02 '14 at 18:32

mareoraft

3,474
4
26
62

Thanks for the reply @mareoraft that seems to work in an HTML Editor like w3schools, however it doesn't work in practise on an iPhone or on a web browsers email application. – user3380148 Apr 02 '14 at 18:38
People use a [CSS Reset](http://www.cssreset.com/) to get rid of these default formatting things. Looking at those, you can see they add **margin:0; padding:0; border:0; outline:0;** to both the **BODY** and the **HTML** tags. I hope that works... – mareoraft Apr 02 '14 at 18:43
Thats closer, though I still seem to have some margin at the right of my container, I will edit the original questions code so you can see more clearly, thanks @mareoraft – user3380148 Apr 02 '14 at 18:49
1

That boilerplate thing looks great. If you look at [the code](http://htmlemailboilerplate.com/#f1), you can see for the **BODY** tag and many other tags, they are manually setting **width:100%**. To be more precise, they are setting **body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}** – mareoraft Apr 02 '14 at 19:07
So I literally, copy that code and kind of, edit away, add my own style etc, it's THAT easy ?? @mareoraft – user3380148 Apr 02 '14 at 19:08
I never used boilerplate myself. You have Jeggs to thank for that. – mareoraft Apr 02 '14 at 19:12
1

I would point out that Outlook ignores margin so you need to use Margin (capital M). – Eoin Nov 16 '16 at 17:52

score 0 · Answer 4 · answered Apr 02 '14 at 18:30

0

Have you tried putting

margin:0;

in the body style tag?

answered Apr 02 '14 at 18:30

peridot1986

85
5

Thanks for the reply @peridot1986, thought that does work in an HTML Editor like w3schools, it doesn't work in practise on an iPhone or on web browsers email application. – user3380148 Apr 02 '14 at 18:37

100% table width for html email

4 Answers4

Linked