LPChip LPChip - 4 months ago 15
HTML Question

Table with fixed and variable width for MS Outlook

I'm trying to make a signature that works cross-platform. Given that I will be sending emails to people with outlook, I want it to appear right in Outlook too.

What I want to do is move the text I type to the right so it aligns properly with the image below.

I can make it work perfectly in my own mail client, which is Thunderbird, and view it in all browsers okay too, but getting it to work in outlook seems a problem.

Using a div and CSS seems to be out of the question, outlook simply ignores it and it vanishes.

When I use a table, outlook does seem to honor it, but getting both a fixed and variable width cell that behave seems to be a problem.

I tried the following html code:

<table style="table-layout:fixed;" cellpadding="0" cellspacing="0">
<tr>
<td width="64"><br></td>
<td><font face="Arial" size="2">
<br><br>Yours Sincerely,<br><br></font>
</font></td>
</tr>
<tr>
<td colspan="2">
<img alt="" src="file:///X:/image.png" height="168" width="681">
</td>
</tr>




This works everywhere, except outlook. Does anyone know a way to fix this, or a different method I could use that will work? I'd like to prevent going for 2 fixed width columns.

Answer

Try this:

<table style="table-layout:fixed;" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding-left: 64px;"><font face="Arial" size="2">
        <br><br>Yours Sincerely,<br><br></font>
    </font></td>
  </tr>
  <tr>
    <td>
      <img alt="" src="file:///X:/image.png" height="168" width="681">
    </td>
  </tr>
</table>

It's not true that you can't use CSS for Outlook. It only has to be inline and only a few things work. One of them is Padding. This should space your text away from the left side and also work in Outlook.

Also you don't need the colespan, since a row is fitted to the contend and is expanding past other rows, if not specified.