Question

我的HTML电子邮件模板有些困难。我是这个HTML世界的新手，这是我的第一个电子邮件模板。我无法使用<div>标签这一事实让我感到头疼。

我认为如果你看截图会更好。我很好地解释了我想要的东西。这是一张图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fashion Newsletter</title>
<style type="text/css" >
body {
    font: Georgia, "Times New Roman", Times, serif;
}

</style>
</head>

<body>
<!--For Three Columns-->

<table align="center" width="600" cellpadding="0" cellspacing="0" bgcolor="#000" >
  <tr>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="180"><p class="three">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </p></td>
  </tr>
</table>
</body>
</html>

我删除了“Single Column”表的代码，因为对于单列代码工作正常。我还故意添加了bgcolor="#000"，以便我可以了解正在发生的事情。

要点：

如果您查看屏幕截图，我基本上希望减少两个<td>标记之间的空格，即两列。
我想删除在表格末尾生成的空格（极右，黑色）

Answer 1

table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#000" class="box" >
<tr>
<td width="180">
    <a href="#link">
      <img src="images/180.gif" />        </a>      </td>
<td width="180">
    <a href="#link">
      <img src="images/180.gif" />        </a>      </td>
<td width="180"><p class="three">
    <a href="#link">
      <img src="images/180.gif" />        </a>
  </p></td>
</tr>
</table>

添加了一个css风格，你可以玩它并获得你想要的外观：

.box {
background-color: #FFFFFF;
margin: 2px;
padding: 2px;
width: 600px;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 2px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000066;
border-right-color: #990000;
border-bottom-color: #00FF33;
border-left-color: #FF0000;
}

Answer 2

试试这个; 在表格标签样式=“border-style：solid; border-width：2px 0px 2px 0px;”

Answer 3

试试这个。基本上，将table 560px宽，在图像之间放置10px td。您也可能需要删除第三列的p标记，以避免不必要的边距/填充。

如果您想保持table 600px宽，只需在第一列之前和第三列之后添加20px td。

<table align="center" width="560" cellpadding="0" cellspacing="0" bgcolor="#000" >
  <tr>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="10"></td>
    <td width="180">
        <a href="#link">
          <img src="images/180.gif" />
        </a>
      </td>
    <td width="10"></td>
    <td width="180"><a href="#link">
          <img src="images/180.gif" />
        </a></td>
  </tr>
</table>

表HTML边框

3 个答案: