Html 我怎样才能实现从边境出来的img。电子邮件模板？

我需要高100像素的横幅。和它里面的img，高度120px。因此，这张照片以20px的价格出现在我的横幅上； 这是电子邮件。 我还需要在图片的正前方有一个文本列，这样，该列中的文本就具有背景F4

<table>
   <tr>
      <td>
         <img src="" style="margin-top:-20px;" />
      </td>
      <td>
        banner text here
      </td>
   </tr>
</table>

横幅文本在这里

我添加了颜色，这样你就可以看到它在桌子外面了。我给这张图片的高度是120像素，宽度是自动的。使td的最大高度为100px；我在图像上留下了-20px的空白

横幅文本在这里

您可以通过两种方式完成此操作，一种是将图像分为两部分，另一种是使用另外两个表。我在下面添加了代码，供您决定使用哪一个

备选案文1： 此选项将图像作为一个整体放置在具有3列的外部表格中。外两列有一个白色背景的桌子，以满足从灰色区域弹出的头部/帽子。我已经将桌子的宽度设置为100%，以显示它的外观

到目前为止，您在代码中尝试了什么？你能分享一下吗？@sanjay编辑了我的问题，添加了代码，所以你希望图像扩展到表外？@Paige Meinke是的，我是。添加overflow-y：td的首字母，然后是的，它会。在我的测试中工作。@PaigeMeinke，你在哪个电子邮件客户端上测试过这个？Outlook和一些电子邮件客户端不支持溢出。我知道iOS使用webkit呈现电子邮件时会这样做。你是如何测试它的？如果你问我，我已经做了大约8年的电子邮件了，我知道overflow在outlook 2007+@Syfer中不起作用。我目前正在编写一个laravel应用程序，并测试通过它发送到我的yahoo/gmail电子邮件。但我不使用outlook，所以也许这就是它工作的原因。第一个选项很好。非常感谢。我可以实现图片位于左侧吗？您可以从3列表中删除左边的列，并且事情应该自行对齐。我已经用您刚才提出的问题对答案进行了更新。@Syfer ok，我的问题不正确。我应该有什么代码可以控制图片的左边填充，并从图片的右边在表格中添加更多的文本或其他内容？在右边的列（带白色条）上，在同一表格下添加另一行，并将文本放入。