Инлайн стиля ячейки таблицы перемещается вниз на один пиксель

Question

Я использую таблицы для семантической разметки, но укладка их напоминают списки нескольких строк с иконками слева: http://jsfiddle.net/qs1zsL2s/

Однако, встроенные в стиле ячейки показаны один пиксель вниз от значков. Как я могу предотвратить это, поэтому они начинаются с одной и той же позиции?

HTML:

<table> 
    <tbody> 
     <tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr> 
     <tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr> 
    </tbody> 
</table> 

CSS:

td { 
     display: inline; 
     background-color: red; 
} 
td:first-child { 
     display: block; 
     float: left; 
} 
td:last-child { 
     display: block; 
} 
img { 
     height: 48px; 
} 

Answer 1

Просто обновил ваш скрипку: Fiddle

Просто добавьте vertical-align: top в ваш тд

td { 
    display: inline; 
    background-color: red; 
    vertical-align:top; 
} 

Для справки: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

Answer 2

Вы можете просто добавить в свойствах CSS position:relative и top:1px:

td:first-child { 
    display: block; 
    float: left; 
    position: relative; 
    top: 1px; 
} 

fiddle