I am hoping someone can help me out here.

MANY months ago, I came on here looking for an answer to why my email wasn't displaying at 600px on a certain email client(I can't remember which one but it's probably Gmail). I have been using the following code over the last few months:

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" 
style="margin: auto;" width="600px;" width="600">
  <tr>
    <td style="width:600px;" >

For the life of me, I cannot remember why the width is defined in both px and without px on the table. Then defined again on the TD in 600px. I've Googled it like crazy but no answers so far. Any help would be appreciated.

CodePudding user response：

Setting the width of a table

• In a nut-shell, there are two ways to set a width for table or its inner elements (e.g. tr, td, etc—which support width)
  1. Using width property: as part of HTML spec, you can use width property as part of the markup. Like you have width="600" in your table tag. Please note, however, only numeric pixel value or percentage is valid (https://www.w3.org/TR/html401/struct/tables.html#adef-width-TABLE )
  2. Using inline style property or CSS declaration: Like how you have style: 600px; in your td. Here, any valid CSS units can be used.
• While it's typically considered a bad practice to use HTML markup for styling or/and rely heavily on inline styling, for HTML emails not only rely on both—often used simultaneously. Because, well, HTML emails are its own kind of beast.

Why table width doesn't render as intended

It's hard to answer with specific context. Table cells could collapse when there's no content inside, which might affect the widths of their containing elements. There might have been a typo. There might have been an invalid value used in a style declaration. There might have been a conflicting style definition. Or any number of other factors.

CodePudding user response：

The only needed way to set a width on a <table> for an HTML email is to use an inline style.

<table style="width:600px; margin:auto; background-color:#fff;" align="center" border="0" cellpadding="0" cellspacing="0" >

This is the best way to do it because it will take into account The Outlooks on Windows at 120dpi rendering. This is also a personal recommandation of mine to prefer styles over attributes, which is why I moved the background-color in a style as well above.

The only exception to this is for images. The Outlooks on Windows don’t understand a width style on images, only a width attribute. So you always need to define a fixed width for Outlook on Windows in an HTML attribute, and then a fluid width in a style for other clients if you need it.

<!-- Bad example -->
<img src="example.jpg" alt="" width="100%" />

<!-- Good example -->
<img src="example.jpg" alt="" width="600" style="width:100%;" />

CodePudding user response：

use 1 - 100 % at the place of px