表格樣式問題

Question

我編寫了一個表格，但由於某種原因，右列沒有與左列對齊。

左列略微向下放置。這裏就是一個小提琴：http://jsfiddle.net/5Me4L/

代碼：

<table width='620'> 
    <tr> 
     <td width='310'> 
      <span style='font-size:21px; font-family:Arial, Helvetica, sans-serif; color:#00abbd; font-weight:bold'>Pay Monthly</span> 
      <table width='310' cellpadding='6' cellspacing='0' border='0' style='border-color:#00abbd; border-width:0px; border-style:solid; padding:3px'> 
       <tr bgcolor='#eeeeee'><td width='160'><p class='rates' style='color:#00abbd;'><strong>Call to Argentina</strong></p></td><td><p class='rates'>&euro; 3.88 /min</p></td></tr> 
       <tr><td><p class='rates' style='color:#00abbd;'><strong>Call to Malta</strong></p></td><td><p class='rates'>&euro; 3.40/min</p></td></tr> 
       <tr bgcolor='#eeeeee'><td><p class='rates' style='color:#00abbd;'><strong>Call to Zone 4 </strong> </p></td><td><p class='rates'>&euro; 3.88 /min</p></td></tr> 
       <tr><td><p class='rates' style='color:#00abbd;'><strong>Calling other Zones</strong></p></td><td><p class='rates'>&euro; 4.00 /min</p></td></tr> 
       <tr bgcolor='#eeeeee'><td><p class='rates' style='color:#00abbd;'><strong>Receiving Calls</strong></p></td><td><p class='rates'>&euro; 1.46 /min</p></td></tr> 
       <tr><td> 
        <p class='rates' style='color:#00abbd;'><strong>Data</strong></p></td><td><p class='rates'> &euro; 17.48</p> 
        </td></tr> 
       <tr bgcolor='#eeeeee'><td><p class='rates' style='color:#00abbd;'><strong>SMS</strong></p></td><td><p class='rates'>&euro; 0.39</p></td></tr> 
       <tr><td><p class='rates' style='color:#00abbd;'><strong>MMS</strong></p></td> 
        <td><p class='rates'>&euro; 0.22 + €17.48</p></p></td></tr> 
      </table> 
      <td width='310'> 
       <span style='font-size:21px; font-family:Arial, Helvetica, sans-serif; color:#00abbd; font-weight:bold'>Pay Monthly</span> 
       <table width='310' cellpadding='6' cellspacing='0' border='0' style='border-color:#00abbd; border-width:0px; border-style:solid; padding:3px'> 
        <tr bgcolor='#eeeeee'><td width='160'><p class='rates' style='color:#00abbd;'><strong>Call to Argentina</strong></p></td><td><p class='rates'>&euro; 3.88 /min</p></td></tr> 
    </tr> 
</table> 

這是它應該如何看：

您的幫助球員非常感謝。

Answer 1

一個vertical-align:top屬性添加到您的tr：

tr { 
    vertical-align: top; 
} 

見​​

Answer 2

您需要使用垂直對齊的表格單元格，就像這樣：

<td width='310' valign="top"> 

Answer 3

關於第二個我修改它。這將強制該表數據到頂部。有更好的方法來編碼表。你可以看看他的頁面 - http://www.w3schools.com/html/html_tables.asp

Answer 4

添加垂直對齊：頂部屬性爲您的TD

DEMO

CSS

td { 
    vertical-align:top; 
}