html - HTML:表格在右边，图片在左边，文本由于某种原因而被下推

我几乎是一个完整的初学者，请记住这一点

<table style="border:none" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border:none" valign="top" vertical-align:"top"; width="20%">
        <div><img class="alignnone size-medium wp-image-232" src="" style="border: 1px solid #000000; alt="" width="294" height="300"></div>
        <div class="caption" style="font:8pt/12pt verdana" align="center">text</div>
      </td>
      <td style="border:none" valign="top" vertical-align:middle;>
        <div style="font:10pt/14pt verdana" align="justify" valign="top">text text text</div>
      </td>
  </tbody>
</table>

由于某种原因，右栏中的文本被左侧的图像向下推。我发现可以通过在图像前添加＆nbsp来纠正此问题，但是图像被推下并显得难看。

问题：
如何垂直对齐图像和文本？

为什么cell padding和cell spacing什么都不做？

最佳答案

默认情况下，Cellpadding和cellspacing为0。这就是为什么它们“什么也不做”的原因。要垂直对齐，请使用CSS vertical-align。就像是

<td style="vertical-align:top;">

可能就是您要寻找的。