CSSテーブルスタイルをオーバーライドしてパディングを削除する

Question

これを行うにはいくつかのオプションを試しましたが、うまくいきませんでした。画像の周りのパディングを取り除き、テーブルを締めてください。私は使用できるいくつかのインラインスタイルがなければならないと思っていますが、私はまだこれを理解するにはあまりにも多くの初心者です。どんな助けでも大歓迎です。

ここでは、photoshopから生成されたhtmlです。インラインスタイルを使用して

<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0"> 
<tbody> 
<tr> 
<td colspan="2"><a href="http://www.boem.gov/"> <img src="http://oceanleadership.org/wp-content/uploads/BOEM-Logo.jpg" alt="http://www.boem.gov/" width="297" height="115" border="0" /></a></td> 
<td colspan="2"><a href="http://www.jasco.com/"> <img src="http://oceanleadership.org/wp-content/uploads/JASCO-Logo.jpg" alt="http://www.jasco.com/" width="273" height="115" border="0" /></a></td> 
</tr> 
<tr> 
<td><a href="https://www.csaocean.com/"> <img src="http://oceanleadership.org/wp-content/uploads/CSA-Ocean-Sciences-Inc.-Logo.jpg" alt="https://www.csaocean.com/" width="152" height="96" border="0" /></a></td> 
<td><a href="http://www.ifaw.org/united-states"> <img src="http://oceanleadership.org/wp-content/uploads/IFAW-Logo.jpg" alt="http://www.ifaw.org/united-states" width="145" height="96" border="0" /></a></td> 
<td><a href="http://www.mbari.org/"> <img src="http://oceanleadership.org/wp-content/uploads/MBARI-Logo.jpg" alt="http://www.mbari.org/" width="125" height="96" border="0" /></a></td> 
<td><a href="https://schmidtocean.org/"> <img src="http://oceanleadership.org/wp-content/uploads/Schmidt-Ocean-Institute-Logo.jpg" alt="https://schmidtocean.org/" width="148" height="96" border="0" /></a></td> 
</tr> 
<tr> 
<td><a href="http://www.teledynemarine.com/SitePages/HomePage.aspx"> <img src="http://oceanleadership.org/wp-content/uploads/Teledyne-Marine-Logo.jpg" alt="http://www.teledynemarine.com/SitePages/HomePage.aspx" width="152" height="80" border="0" /></a></td> 
<td><a href="http://oceansonics.com/"> <img src="http://oceanleadership.org/wp-content/uploads/Ocean-Sonics-Logo.png" alt="http://oceansonics.com/" width="145" height="80" border="0" /></a></td> 
<td><a href="http://www.l-3mps.com/maripro/"> <img src="http://oceanleadership.org/wp-content/uploads/L3-Maripro-Logo.jpg" alt="http://www.l-3mps.com/maripro/" width="125" height="80" border="0" /></a></td> 
<td><a href="https://sea-birdscientific.com/"> <img src="http://oceanleadership.org/wp-content/uploads/Sea-Bird-Scientific-Logo.png" alt="https://sea-birdscientific.com/" width="148" height="80" border="0" /></a></td> 
</tr> 
</tbody> 
</table> 
<br /> 

Answer 1

は素晴らしいアイデアではありませんが、属性のスタイル=「パディング：0PX、マージン：0PX」を含むあなたのimgタグにインラインすると、ブラウザが周りの余分なスペースをレンダリングされていない保証するであろう画像そのもの。より良いオプションは、ルールを含む.cssファイルを含めることです： td img { パディング：0px; 余白：0px

このルールでは、テーブル内のすべてのimgタグにスタイリングが自動的に割り当てられます。

Answer 2

画像の問題あなたの画像のために空白を残したままあなたのスタイルを削除しました。 あなたはあなたのコード の下 <table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">

を見ることができます私はこのスタイルを削除し、ここ Demo