Reputation: 193

Table Styling Issue

I have coded a table but for some reason, the right column is not aligning with the left column.

The left column is being placed slightly down. Here is a fiddle of this: http://jsfiddle.net/5Me4L/

Code:

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

This is how it should look:

enter image description here

Upvotes: 0

Answers (4)

Santy

Reputation: 312

Add a vertical-align:top property to your td

DEMO

CSS

td {
    vertical-align:top;
}

Upvotes: 0

Andrew Rogers

Reputation: 31

On your second I modified it to . That will force that table data to the top. There are better ways to code table though. You may check out his page - http://www.w3schools.com/html/html_tables.asp

Upvotes: 0