2017-10-17 86 views
-3

我对HTML和CSS相当陌生,我一直在努力通过使用表来创建可点击的横幅,但我无法摆脱之间的空白我的行和拼接的图像。
这就是表看起来像在浏览器中删除表格中的空白而不影响其他行的放置

Browser view of table

而下面是我的表码:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>A Spot Banner</title> 
</head> 
<body> 
    <table style="width: 100%;"> 
     <tbody> 
      <tr> 
       <td colspan="3"><img src="images/top%20header%201.jpg" alt="TOP BANNER" /></td> 
      </tr> 
      <tr> 
       <td><img src="images/top%20row%20left%20side%201.jpg" alt="SECOND BANNER" /></td> 
       <td><a href="https://www.link.com/login"><img src="images/last%20image%20to%20line%20with%20top%20header%201.jpg" alt="THIRD BANNER" /></a></td> 
      </tr> 
      <tr> 
       <td><a href="https://www.link.com/application"><img src="images/bottom%20row%20left%20side%202.jpg" alt="FOURTH BANNER" /></a></td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html> 

我使用填充和利润率试图内嵌样式,但都似乎会影响其他横幅的位置,特别是第三个横幅。
我很新,不太确定还有什么其他的尝试,有没有人有任何建议或资源,我可以用它来解决这个问题?

+2

请编辑您的问题并提供[mcve]。 **不要发布代码**的图像。 – Xufox

回答

2

尝试加入这个CSS:

table { 
    border-collapse: collapse; 
} 
td { 
    padding: 0; 
} 

边界崩溃将做到这一点:删除每个表中的数据(<td>)元素之间的空间。
填充也将删除这些元素之间的任何剩余空间。