表格 HTML 边框答案

【问题标题】：Table HTML border表格 HTML 边框
【发布时间】：2013-06-20 02:32:03
【问题描述】：

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

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

总结：

如果你看截图，我基本上是想减少两个<td>标签之间的空间，即两列。
我想删除表格末尾生成的空格（最右边，黑色）

【问题讨论】：

我可能错了，但看起来您将表格设置为 600 像素，每列设置为 180 像素。这可能会导致列之间的黑色区域。

标签： html html-table alignment html-email

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：