Question

我正在尝试进行以下设计 design

所以我的外表将有2个表行。

第一个表格行将有3个td，每个表格都包含自己的内部表格（设计中用颜色阴影表示的表格）。

所以我的第一个表行tds看起来像这样

<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="3"><img src="image1.jpg" alt="" width="186" height="20"  border="0" style="display: block;"></td>
                </tr>
                <tr>
                    <td><img src="image4.jpg" alt="" width="34" height="66"  border="0" style="display: block;"></td>
                    <td><img src="image5.jpg" alt="" width="120" height="66"  border="0" style="display: block;"></td>
                    <td><img src="image6.jpg" alt="" width="32" height="66"  border="0" style="display: block;"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="image12.jpg" alt="" width="186" height="20"  border="0" style="display: block;"></td>
                </tr>
            </table>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="3"><img src="image2.jpg" alt="" width="67" height="106"  border="0" style="display: block;"></td>
                </tr>
            </table>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="4"><img src="image3.jpg" alt="" width="397" height="26"  border="0" style="display: block;"></td>
                </tr>
                <tr>
                    <td><img src="image7.jpg" alt="" width="178" height="25"  border="0" style="display: block;"></td>
                    <td><img src="image8.jpg" alt="" width="83" height="25"  border="0" style="display: block;"></td>
                    <td><img src="image9.jpg" alt="" width="15" height="25"  border="0" style="display: block;"></td>
                    <td><img src="image10.jpg" alt="" width="121" height="25"  border="0" style="display: block;"></td>
                </tr>
                <tr>
                    <td colspan="4"><img src="image11.jpg" alt="" width="397" height="55"  border="0" style="display: block;"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

现在一切都很好，它应该怎么做。我不太确定我是否正确地完成了colspans？

无论如何，移动到第二个表行，我有以下

<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
       //first table row data
    </tr>
    <tr>
        <td colspan="4">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><img src="image13.jpg" alt="" width="33" height="122"  border="0" style="display: block;"></td>
                    <td><img src="image14.jpg" alt="" width="255" height="122"  border="0" style="display: block;"></td>
                </tr>
            </table>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><img src="image15.jpg" alt="" width="362" height="122"  border="0" style="display: block;"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

一旦我添加第二行，我的设计就会混乱。从本质上讲，我最终将我的设计看作如下所示 design2

我怎样才能避免这种情况发生？我想这可能与我的colspans有关，但不太确定。

由于

Answer 1

几件大事......

这出现在哪里？ Outlook我认为，版本是什么？

为每个关注宽度的元素定义内联widths和max-width，在表格HTML中内联。保持外表包装内的所有元素。如果忽略主外表元素。将几个表作为包装器嵌套，直到将元素包含到所需的布局中。使用CSS但是内联。

阅读此article。

HTML电子邮件将切片放在一起

1 个答案: