無法弄清楚為什么表格元素放置錯誤

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;" />

*請注意在引號內移動的已刪除的分號和樣式分號。 大多數圖像標簽似乎都存在此問題。