HTML表给了我麻烦

时间：2012-11-27 07:48:31

标签： html css

我尝试使用2个表并排创建下表（每个300宽度和300宽度），但是，由于布局，如果我创建它作为我想要实现的一个表，左边因为左边的细胞延伸到右边细胞的高度，所以右边的高度变得混乱。

我怎样才能实现这一目标（这是针对HTML电子邮件的新闻通讯，所以没有div）？

enter image description here

我希望在一个表格中执行的两个表格布局 

 <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>

3 个答案:

答案 0 :(得分：2)

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

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

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

单表：

<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以及所有图片的宽度和高度，但你可以填写这些技巧）

答案 1 :(得分：0)

我猜你可以使用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在这里会有所帮助。

Sameple代码

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

根据您的需要进行调整。

答案 2 :(得分：0)

包含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>
相关问题
最新问题