Problems in aligning radio options within a table row in html

Question

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 enter image description here 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.

@jacelysh: okay thanks.. it didnt occur to me.. Now, why does it having aligning problems when i have different tds? — Aarish Ramesh
– Aarish Ramesh, Commented Jul 3, 2014 at 7:30
@jacelysh: Also what should i do to have it in different tds and also properly aligned? — Aarish Ramesh
– Aarish Ramesh, Commented Jul 3, 2014 at 7:34

Gezzasa · Accepted Answer · 2014-07-03 07:34:50Z

1

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/

answered Jul 3, 2014 at 7:34

Gezzasa

1,4618 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3745310 · Accepted Answer · 2014-07-03 08:28:10Z

0

You can done this with paragraph tag i have used it. This is the code you can use it.

 <p style="margin-left:21em;" >
 <input type="radio" value="1" name="location" id="usa">USA
 <input type="radio" value="2" name="location" id="canada">Canada
 </p>

answered Jul 3, 2014 at 8:28

user3745310

Collectives™ on Stack Overflow

Problems in aligning radio options within a table row in html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related