表格样式问题

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; 
}