Problems aligning radio options in a table row in html

I have sample html page for inputting user details and the code for which is below

<html>
<style type="text/css">
    .menuOff {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
    }
</style>
<body>
    <table>
            <tr id="NAME">
            <td><B><span class="menuOff">Name</span> </B>
            </td>
            <td><input type="text" name='name' id='name' value="">
            </td>
            </tr>
            <tr id="EMAIL">
                <td><B><span class="menuOff">Email Address</span> </B>
                </td>
                <td><input type="text" name='email' id='email' value=''>
                </td>
            </tr>
            <tr id="COUNTRY">
                <td><B><span class="menuOff">Location</span> </B>
                </td>
                <td><input type="radio" value="1" name="location" id="usa"><span
                class="menuOff">USA</span>
                </td>
                <td><input type="radio" value="2" name="location" id="canada"><span
                class="menuOff">Canada</span>
                </td>
                <td><input type="radio" value="0" name="location" id="india"><span
                class="menuOff">India</span></td>
            </tr>
            <tr id="ADDRESS">
                <td><B><span class="menuOff">Address:</span> </B></td>
                <td><input type="text" name="address" id="address" autocomplete="off"/></td>
            </tr>
    </table>
</body>
</html>

Now i have a problem in aligning the radio blocks.As shown in the screen shot, the second radio button appears to be placed far away from the first one, the reason for which i am not able to figure out. So someone please explain the reason behind the alignment problem

and how can i have the row of radio options properly aligned in my case?

PS: I know that this can be solved by having a table or div block enclosing the td tags but i want a solution apart from it.


Table Columns uses the min width of the other columns as its width. (Not sure exactly how to word it)

Your first radio takes up the width of the columns with the inputs.

Check here for a solution

<td>
     <input type="radio" value="1" name="location" id="usa"><span class="menuOff">USA</span>
     <input type="radio" value="2" name="location" id="canada"><spanclass="menuOff">Canada</span>
     <input type="radio" value="0" name="location" id="india"><span class="menuOff">India</span>
</td>

http://jsfiddle.net/fhHgX/