HTML - table / td sizing问题

Question

我遇到的问题是：http://jsfiddle.net/gcgz8/

<table>
  <tr>
    <td class="header">Header</td>
    <td class="line"><div></div></td>
  </tr>
  <tr>
    <td colspan="2">
      <img src="http://i.imgur.com/uO2gVbl.png" width="200px" />
    </td>
  </tr>
</table>

每当我向我的内容添加图片或视频时，标题和行都会搞砸

Answer 1

http://jsfiddle.net/gcgz8/3/

答案：不要使用表格？

<span class="left">Header</span><span class="right"></span>
<p>content content content content content content content content content content content content content content content content content </p>
<span class="left">Header</span><span class="right"></span>
<p><img src="http://i.imgur.com/uO2gVbl.png" width="200px"></p>

CSS

.left {
    display: inline-block;
    width: 12%;
    font-size: 30px;
}
.right {
    display: inline-block;
    width: 88%;
    background: black;
    margin: 25px 0 10px 0;
    height: 5px;
}

这不是我最好的工作，只是你“可以”做的一个例子。