HTML 表格代码创建未对齐的表格答案

【问题标题】：HTML table code creates unaligned tableHTML 表格代码创建未对齐的表格
【发布时间】：2017-03-17 10:37:29
【问题描述】：

我正在尝试在此表中对齐我的照片和它们的描述，但不知道我缺少什么。如果可能的话，我希望所有的图像/描述都可以触摸和连接。

这是我的代码，非常简单的 HTML 电子邮件模板，用于 mailchimp：

<body background="http://i.imgur.com/M0jxU8g.jpg"><table>
  <tr>
    <td><img src="http://themilamgroup.com/email/templates/fallinventory/images/promo/promo_3_large.jpg" height="175px" width="300px"></td>
<td><div style="background-color:#142232; height:135px;width:280px; color:#ffffff; padding:20px; text-align:center;">PENDED<br>
$775,000
<br><br>
1771 Charity Drive<br>
Brentwood, TN 37027
<br><br>
4 bdrm, 3.5 ba, 4115 sq ft</div></td>
  </tr>
    <tr>
   <td>
    <div style="background-color:#142232; height:135px;width:280px;color:#ffffff; text-align:center; padding:20px">PENDED<br>
$775,000
<br><br>
1771 Charity Drive<br>
Brentwood, TN 37027
<br><br>
4 bdrm, 3.5 ba, 4115 sq ft</div></td>
   <td><img src="http://themilamgroup.com/email/templates/fallinventory/images/promo/promo_3_large.jpg" height="175px" width="300px"></td>
  </tr>  <tr>
    <td><img src="http://themilamgroup.com/email/templates/fallinventory/images/promo/promo_3_large.jpg" height="175px" width="300px"></td>
<td>
    <div style="background-color:#142232; height:135px;width:280px;color:#ffffff; text-align:center; padding:20px">PENDED<br>
$775,000
<br><br>
1771 Charity Drive<br>
Brentwood, TN 37027
<br><br>
4 bdrm, 3.5 ba, 4115 sq ft</div></td>
  </tr>
    <tr>
   <td>
    <div style="background-color:#142232; height:135px;width:280px;color:#ffffff; text-align:center; padding:20px">PENDED<br>
$775,000
<br><br>
1771 Charity Drive<br>
Brentwood, TN 37027
<br><br>
4 bdrm, 3.5 ba, 4115 sq ft</div></td>
  </tr>
</table></body>

它的样子：

【问题讨论】：

你需要this吗？

标签： html email html-email mailchimp

【解决方案1】：

当您使用表格时，实现此目的的唯一方法是列中每个单元格的内容都具有相同的宽度。否则，列的宽度将始终由内容最宽的单元格定义。

您可以将左侧列中的内容浮动到右侧，这将实现您所追求的，但我个人认为这不是一个理想的解决方案。如果您将所有内容的大小设置为相同的宽度，它会看起来更整洁。

目前，您的信息 DIV 的宽度为 320 像素 - 宽度为 280 像素，外加两侧的内边距为 20 像素。将边距更改为仅 10 像素的边距将使您的所有内容宽 300 像素。

如果你想要零间距，你可以在表格标签中添加以下属性：

cellspacing="0" cellpadding="0"

【讨论】：

【解决方案2】：

如果您将<table> 的默认值归零并为每个图像内联display:block;，则应该会消除上面预览中的所有意外空间。

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td>
            <!-- text goes here -->
        </td>
        <td>
            <img src="" alt="" style="display: block;">
        </td>
    </tr>
</table>

【讨论】：