html - HTML表格给我带来了麻烦

Question

我尝试使用 2 个并排的表格（每个表格 300 宽度和 300 宽度）创建下表，但是，由于布局的原因，如果我将它创建为一个表格，这是我想要实现的，左右高度因为左边的单元格延伸到右边单元格的高度，所以一切都混乱了。

我怎样才能做到这一点（它是用于 HTML 电子邮件通讯，所以没有 div）？

我更喜欢在一张桌子上做的两张桌子布局

 <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: left; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-top-left.png" width="300" height="74" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td height="163" style="border-collapse: collapse;vertical-align: top;">
<p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0; color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">Content left</p>
</td></tr>
<tr><td valign="top" style="border-collapse: collapse;">
<img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;" border="0" src="images/content-bottom-left.png" width="300" height="75">
</td></tr>
<tr><td valign="top" style="background-color: #a4000f; height: 148px; border-collapse: collapse;" bgcolor="#a4000f">
<img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: right; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;"><img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"></td></tr>
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td width="292" height="158" valign="top" style="background-color: #a4000f; padding-top: 0; padding-left: 0; padding-bottom: 0; padding-right: 8px; height: 160px; border-collapse: collapse;margin-top:0;" bgcolor="#a4000f">
<p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left; color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;" align="left">The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
</td></tr>
</table>

Answer 1

我会简单地使用一个包含一行和两个单元格的表格，每列一个。堆叠每个单元格中的所有内容。

如果您需要在每个单元格内嵌套另一个表格以在文本周围放置填充，这很容易做到。

举个例子（在我脑海中，我很久没有这样做了！）

单表：

<table width="600">
  <tr>
    <td width="300">
      <img src="top_left.png"><br>
      Text goes here<br>
      <img src="left.png"><br>
      <img src="bottom_left.png">
    </td>
    <td width="300">
      <img src="top_right.png"><br>
      <img src="right.png"><br>
      More text goes here
    </td>
  </tr>
</table>

或有两个表：

<table width="600">
  <tr>
    <td width="300">
      <table>
        <tr><td><img src="top_left.png"></td></tr>
        <tr><td style="padding: 20px;">text goes here</td></tr>
        <tr><td><img src="left.png"></td></tr>
        <tr><td><img src="bottom_left.png"></td></tr>
      </table>
    </td>
    <td width="300">
      <table>
        <tr><td><img src="top_right.png"></td></tr>
        <tr><td><img src="right.png"></td></tr>
        <tr><td style="padding: 20px;">more text goes here<td></tr>
      </table>
    </td>
  </tr>
</table>

（当然，我省略了所有其他 HTML 电子邮件技巧，例如display:block所有图像的宽度和高度，但您可以填写）

Answer 2

我想你也许可以使用div标签。但是对于 html 表，请检查下表，其中包含 5 行 2 列，所有行的高度相同。

<table>
    <tr height="20%">
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
</table>

如果需要，您还可以提供一般对齐或特定单元格的选项。

编辑

您不能为同一行中的 2 个单元格指定不同的高度。我想这rowspan在这里会有所帮助。

相同代码

<table>
    <tr>
        <td>Content</td>
        <td rowspan="2">Content</td>
    </tr>
    <tr>
        <td>Content</td>
    </tr>
</table>

根据您的需要进行调整。

Answer 3

包含 2 列内容堆叠的 1 个表的示例：

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top" width="300">
            <div>
                <img align="top" border="0" src="images/content-top-left.png" width="300" height="74"
                    style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0;
                    color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">
                    Content left</p>
            </div>
            <div>
                <img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;"
                    border="0" src="images/content-bottom-left.png" width="300" height="75" />
            </div>
            <div>
                <img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top;
                    outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
        </td>
        <td valign="top" width="300">
            <div>
                <img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none;
                    text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138"
                    style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left;
                    color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;"
                    align="left">
                    The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
            </div>
        </td>
    </tr>
</table>