0

我的 HTML 电子邮件模板遇到了一些困难。我是这个 HTML 世界的新手，这是我的第一个电子邮件模板。我不能使用<div>标签的事实真的让我很头疼。

我认为如果你看截图会更好。我在那里很好地解释了我想要什么。这是一张图片：

http://i.imgur.com/MPuBJcX.jpg

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

我删除了“单列”表的代码，因为单列代码工作正常。我还故意添加bgcolor="#000"，以便我可以看看发生了什么。

概括：

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

3 回答 3

0

试试这个。基本上，使table560px 宽，td在图像之间放置 10px。此外，您可能需要删除p第三列的标签以避免不需要的边距/填充。

如果要保持table600px 宽，只需td在第一列之前和第三列之后添加 20px。

<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>
于 2013-06-23T17:07:57.190 回答
0 
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;
}
于 2013-06-23T13:15:36.253 回答
0

尝试这个 ; 在表格标签style="border-style:solid;border-width:2px 0px 2px 0px;"

于 2013-06-23T13:22:32.580 回答