views:

31

answers:

2

When I put an image inline in a table cell, like this:

<table border="1" cellspacing="5" cellpadding="5">
 <tr>
  <td>
   <img width="20" height="20">Text
  </td>
  <td>
   Text
  </td>
 </tr>
</table>

…it shifts the vertical alignment of the text in that cell, like this:

I've played around with vertical-align, but haven't been able to align the in the two cells. What's the right way to do that?

+1  A: 

Ok how about... this!

<table border="1" cellspacing="5" cellpadding="5"> 
 <tr> 
  <td> 
   <img style="float: left;" width="20" height="20">Text 
  </td> 
  <td> 
   Text 
  </td> 
 </tr> 
</table> 
Tim Chaves
Thanks!. That's closer, but not aligned: http://i.imgur.com/CXFZc.png (I knocked out the borders and spacing to make the difference more obvious).
Sidnicious
Ok I thought I had it but was browser dependent. Nevermind. Sorry.
Tim Chaves
+1  A: 

I've been continuing to play around with this problem, here's a workaround I came up with:

<table border="1" cellspacing="5" cellpadding="5">
    <tr>
        <td style="line-height: 20px;">
            <img width="20" height="20" style="vertical-align: top;">Text
        </td>
        <td>
            Text
        </td>
    </tr>
</table>

It renders like this:

I don't love that the the height of the image needs to be in CSS, so I'm still open to other ideas.

Sidnicious