他の行の配置に影響を与えずに表の空白を削除します。

-3

私はHTMLとCSSにはかなり新しいので、テーブルを使ってクリック可能なバナーを作成しようとしていますが、私の行とスプライスされたイメージ。私はパディングとマージンを使用して、インラインスタイルを試してみた他の行の配置に影響を与えずに表の空白を削除します。

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

が、両方：
これは、テーブルが

Browser view of table

以下の表のための私のコードで、ブラウザで次のようになります他のバナー、特に3番目のバナーの配置に影響を与えているようです。
私は全く新しく、他に何を試そうとしているのか分からない、誰かがこれを理解するのに役立つアドバイスやリソースがありますか？このCSSを追加

出典

2017-10-17 Matthew Willis

あなたの質問を編集し、[mcve]を提供してください。 **コード**の画像を掲載しないでください。 – Xufox

試してみてください。

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

ボーダー崩壊はまさにそれを行います：表データ（<td>）の各要素の間にスペースを削除します。
これらの要素の間の残りのスペースも埋め込みによって削除されます。

出典

2017-10-17 22:31:54 rramos

他の行の配置に影響を与えずに表の空白を削除します。

答えて

関連する問題