无法弄清楚为什么表格元素放置错误

Question

我正在创建一个网页，但我没有构建但正在修改。 我是HTML编码的新手。 我的问题是我有一张三列一行的表。 每列在某些文本上包含一两个图片。 由于某种原因，第一列（左列）下降的幅度低于其余列，我不知道为什么。 抱歉，我不允许发布图片，所以您看不到我在说什么。 我希望我已经很好地描述了这个问题。

这是代码：

<div id="clear" style="clear:both;"></div>
<div id="cleandraindry" style="z-index:-999;">
    <div id="hidehere" style="float:left;margin:10px 0 0 99px;width:600px;">
         <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;padding-bottom:8px;width:600px;"> 
            Emerald ash borer hides here
         </span>
         <br><br />
         <span style="font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height:16px;width:354px;">The emerald ash borer is not always visible as the adults are small enough to fit on the head of a penny. The larvae burrow under the bark and through the wood, often going unseen until the ash tree begins to die. Because larvae and pupae can survive for long periods even in cut wood, a primary way to ensure that you don't spread emerald ash borers is to not move firewood from areas with a known infestation, particularly across state lines. </span>
     </div><br />
     <div id="clear" style="clear:both;"></div>
     <!-- <div id="boat" style="margin:20px;"> 
         <img src="firewood_stack_900.jpg" style="display:block;margin:auto;"/>
     </div> -->
     <div>
         <table style="display:block;margin:-10px 0 0 69px;">
             <tr>
                 <td style="width:220px;padding:30px;">
                     <img src="EAB&penny_220x148.jpg"; style="margin:0 0 10px 0";/>
                     <br />
                     <img src="adulteab_220.jpg"; style="margin:0 0 5px 0";/>
                     <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;">
                         adults
                     </span><br />
                     <span style="font-family: Arial, Helvetica, sans-serif;font-size:12px;">
                         1/2 inch long and 1/8 inch wide, metallic emerald green in coloration. Can be distinguished from other similar boring beetles by the disinctive reddish top surface of their abdomen (under the wings). Females lay 50-100 eggs in bark crevices. (Photo: David Cappaert [top], Howard Russell, both Bugwood.org)
                     </span>  
                 </td>   
                 <td style="width:220px;padding:30px;">
                     <img src="canopydieback_220.jpg"; style="margin:0 0 10px 0";/>
                     <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;">
                         Canopy
                     </span><br />
                     <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px">
                         As the emerald ash borer larvae feed, the canopy leaves die from the top down. The feeding larvae also trigger new branches and shoots on trunk and branches. (Photo: Daniel Herms, Bugwood.org)
                     </span>
                 </td>
                 <td style="width:220px;padding:30px;">
                     <img src="feedinggallery_220.jpg"; style="margin:0 0 10px 0"; />
                     <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;">
                         girdling
                     </span><br />
                     <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px">
                         Larvae burow into the phloem (bark) and sapwood, creating S-shaped galeries under the bark and blocking nutrient flow. This eventually kills the tree. (Photo: James W. Smith, USDA APHIS PPQ, Bugwood.org)
                     </span>
                 </td>
             </tr>
         </table>
     </div>
 </div>

Answer 1

问题似乎与此处的br行有关：

 <img src="EAB&penny_220x148.jpg" ; style="margin:0 0 10px 0" ;/>
 <br />

<br />即使未显示该图像也会产生间隙。 删除该行，标题应对齐。 我还建议添加以下样式： vertical-align:top;

style="vertical-align:top;width:220px;padding:30px;"

确保它们在顶部对齐。

此外，为了改进代码，还存在以下问题：

<img src="EAB&penny_220x148.jpg"; style="margin:0 0 10px 0";/>

应该是

<img src="EAB&penny_220x148.jpg" style="margin:0 0 10px 0;" />

*请注意在引号内移动的已删除的分号和样式分号。 大多数图像标签似乎都存在此问题。