このテーブルレイアウトをCSSレイアウトに変更するにはどうすればよいですか？

Question

私は余裕、パディングやボーダーを持たないskinny CSSクラスを作成しました：

.skinny 
{ 
    margin:0 0 0 0; 
    padding:0 0 0 0; 
    border:0 0 0 0; 
} 

そして、私もそれに適用 skinnyクラスがある画像含む行にそれを適用：

<td width="33%" align="center" class="skinny"> 
    <table width="400px" height="180px" class="skinny"> 
     <tr class="skinny"> 
      <td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td> 
      <td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td> 
     </tr> 
    </table> 
</td> 

を

私は画像が次のセルの<h1>テキストのできるだけ近くに表示されるようにしようとしているので、それらは左から右にお互いに押し上げられます。

skinnyクラスをいくつ適用しても、画像とテキストの間にスペースを作成する各テーブルセルの周りに「パディング」のようなものがあるようです。

画像をテキストの左に直接配置するCSSレイアウトを作成するには、何もする必要がありますか？

私はこの試みた：

<td width="33%" align="center" class="skinny"> 
    <div class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></div> 
    <div class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></div> 
</td> 

をしかし、それは、テキストの上に画像を置きます。

Answer 1

を

元のレイアウトでは、2番目のtdの幅を*に変更します。何が起こっているのかは、テーブルとその行が一定量の塗りつぶし幅を持ち、レイアウトエンジンがそれをセル間で共有していることです。

divを使用する場合は、セバスチャンによれば、display: inline-blockを使用します。

Answer 2

は

table.skinny { border-collapse:collapse; } 

EDITしてみてください：あなたはTDで唯一のイメージを持っている場合、display:blockがディセンダースペースを取り除くでしょう。

また、h1のline-heightを混乱させて、1などに設定することもできます。

Answer 3

これを試してみてください。ここで

div.skinny { 
    display: inline-block; 
    vertical-align: middle; 
} 

プレイ：http://jsfiddle.net/SebastianPataneMasuelli/qAjkv/

Answer 4

をこれは何をするのでしょうか？

table.skinny { 
    border-spacing: 0; 
} 

そして、それはオフトピックですが、いくつかのゼロがただ1つのゼロと同じ効果を持っている：

.skinny 
{ 
    margin: 0; 
    padding: 0; 
    border-style: none; 
} 

Answer 5

.skinny { フロート：右 }試してみてください