简单的HTML看起来很糟糕?

我无论如何也弄不明白为什么我的桌子会变成这样。图像和文本应排列整齐:

HTML:

<div id="items">
  <div class="category"><h1>Apparel</h1></div>
  <div class="list-product">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td width="50" align="center" style="padding-right: 5px;">
        <img height="30" src="/images/products/none.jpg" />
      </td>
      <td>
        <img style="padding: 0 3px 0 0;" src="/images/icons/flag_red.png" />
      </td>
      <td valign="middle">
        <strong>Test Product</strong><br />
        <span style="color: #777;">This has a short description.</span>
      </td>
    </tr>
  </table>
  </div>
  ... and the other table here
</div>

div#items
{
width: 400px;
}

div.category
{
padding: 7px 13px;
background: #f0f0f0;
color: #101010;
font-size: 20px;
border-bottom: 1px solid #d0d0d0;
}

.list-product
{
border-bottom: 1px solid #ddd;
font-size: 12px;
padding: 10px;
}