电子邮件

Question

我正在制作一个简单的新闻稿布局，它只能包含基本的HTML，但我会抓住它正确格式化它。我有很少的HTML经验，如果我可以使用CSS我可以解决这个问题，但这是低级别的HTML，大多数电子邮件客户端都可以正常显示。

这是我用来获取图像的一些代码和一个按钮（在按钮2的位置）看起来正确但是正确地将顶部和底部按钮放在那里就是问题。

<table width="100%" style="text-align:center;">
 <td>
 <img src="http://localhost/temp/leftpic.png"></td>
<td>
 <img src="http://localhost/temp/button.png"></td>
</table>

这是我的设计结果。外边框是以页面中间为中心的表格边框。

是否可以在不使用css的情况下格式化相对接近的内容？

我感谢任何帮助，欢呼。

Answer 1

您可以使用css，您只需要避免使用第三方文件。您需要内联定义CSS规则，即style属性，因为您已经为table执行了此操作。但是，您的HTML无效。您需要在tr元素之外添加td元素，并且将tr元素主动包装在tbody内是健康的，table应该是您{{1}的孩子}}

顺便说一下：在这种情况下应避免使用第三方CSS的原因是它可能会破坏gmail / yahoo页面的设计。

Answer 2

像这样的东西会让你失望......这是没有CSS和没有样式（除了你原来的）。

虽然你没有声明CSS，但你的第一行是造型（尽管是内联的）。你的意思是没有外部文件吗？

这就是我们以前在CSS之前做布局的方式，所以这是使用HTML表格：

<table width="100%" style="text-align:center;"  border="1">
    <tr>
 <td width="50%">
         <img src="http://localhost/temp/leftpic.png" width="390" height="480" />
     </td>
<td>
    <table>
        <tr>
        <td><input type="button" value="bn1" /></td>
        </tr>
        <tr>
        <td><input type="button" value="bn2" /></td>
        </tr>
        <tr>
        <td><input type="button" value="bn3" /></td>
        </tr>
    </table>
     </td>
    </tr>
</table>

由于左侧图像的高度固定，您也可以使用

<tr height="160">

160 * 3 = 480（图像高度）

在此处查看示例https://jsfiddle.net/on6ytfyn/

您可能也希望删除第一行代码中的边框。