1

我正在设计一个电子邮件活动，我的要求不要求 CSS。不要让我开始。

除了下面提到的表格外，一切正常。角落部分与表格的其余部分偏移了一个像素，我一生都无法弄清楚我在哪里放错了分号或其他东西。

角落部分是相同的 15x15 图像，只是根据角落旋转 90 度。但是您可以看到线条一直延伸到边缘，因此图像上没有额外的填充。

一个角落，放大到 3200%

我尝试了各种迭代，<t*属性越来越少，在表格、行和单元格级别设置内容，99% 的在线搜索都引导我进行问答，以确保跨度正常工作——我认为我的是。当我使用border=1 属性时，上限仍然存在，导致我不怀疑边界是罪魁祸首。

我使用 4 列 x 3 行，最外面的列和行包含 15px X 15px 角图像 (gif)，角之间的单元格具有白色背景，1px X 1px gif 间隔对齐并拉伸给我角落图像之间的一条线。

中间部分是一个带有图标的单元格，后面是一个文本单元格。我需要创建 5 个这样的要点；我添加了第二个空白框来显示当其中两个相互对接时会发生什么。

任何人对我可以查看的内容、需要添加的内容或需要从代码中减去的内容有任何想法吗？

在此处输入图像描述 

<html>
 <body style='background:f3f7f8'>
     <table border=0 width=430 style='font-size=12px;cellpadding=0;cellspacing=0;border-collapse:collapse;'>
       <tr>
        <td width=15 height=15><img src="644810_tl.png" width=15 height=15 ></td>
        <td colspan=2 valign="top" style='background:ffffff'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15><img src="644810_tr.png" width=15 height=15></td>  
       </tr>

       <tr>
        <td style='background=ffffff' align=left><img src="dkgray.gif" width=2 height=100></td>
        <td style='background=ffffff' width=75 align=center valign=center><img src="icon-pdf.gif"></td>
        <td style='background=ffffff' width=325 align=left valign=cener><strong>Lorem Ipsum<br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dignissim risus at quam hendrerit aliquet. Nunc et felis elit. Fusce pharetra adipiscing velit vel pharetra. Donec ornare velit sed massa tempor at tempor sem lacinia. Quisque enim nisl, auctor sit amet volutpat eget, porttitor sit amet tortor. Nulla ut sodales magna. Morbi adipiscing est urna, ac gravida erat.</td>
        <td style='background=ffffff' align=right><img src="dkgray.gif" width=2 height=100></td>
       </tr>

       <tr>
        <td width=15 height=15 style='background=ffffff'><img src="644810_bl.png" width=15 height=15></td>
        <td colspan=2 valign="bottom" style='background:ffffff;cellpadding=0;cellspacing=0;border-collapse:collapse'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15 style='background=ffffff'><img src="644810_br.png" width=15 height=15></td>
       </tr>

       <tr>
        <td width=15 height=15><img src="644810_tl.png" width=15 height=15 ></td>
        <td colspan=2 valign="top" style='background:ffffff'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15><img src="644810_tr.png" width=15 height=15></td>  
       </tr>

       <tr>
        <td width=15 height=15 style='background=ffffff'><img src="644810_bl.png" width=15 height=15></td>
        <td colspan=2 valign="bottom" style='background:ffffff;cellpadding=0;cellspacing=0;border-collapse:collapse'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15 style='background=ffffff'><img src="644810_br.png" width=15 height=15></td>
       </tr>
     </table>
   </body>
  </html>
4

2 回答 2

6

使用边框折叠，这会将单元格的边框折叠到一个边框。

table
{
    border-collapse:collapse;
}
于 2012-07-10T18:27:58.610 回答
4

您正在指定cellpadding并且cellspacing好像它们是 CSS 属性。它们不是——它们是必须存在于table标签上的属性。

此外，十六进制颜色参考应该#在它们之前。

于 2012-07-10T18:30:11.543 回答