Radio buttons not aligning properly

Question

<table>
                <tr style="background:#CCCCCC">
                    <td>
                        <input id="Radio1" name="G1M" value="1" type="radio" /><br />
                        <input id="Radio2" name="G1M" value="2" type="radio" /><br />
                        <input id="Radio3" name="G1M" value="3" type="radio" /><br />
                        <input id="Radio4" name="G1M" value="4" type="radio" />
                    </td>
                    <td>
                        <input id="Radio5" name="G1L" value="1" type="radio" />Gentle or kindly<br />
                        <input id="Radio6" name="G1L" value="2" type="radio" />Persuasive, convincing<br />
                        <input id="Radio7" name="G1L" value="3" type="radio" />Humble, reserved, modest<br />
                        <input id="Radio8" name="G1L" value="4" type="radio" />Original, inventive, individualistic
                    </td>
                </tr>
</table>

In the page, the two sets of radio buttons appear by each other, each 1 column tall and 4 rows deep. However, since the second set has text after it, the spread between the radio buttons are wider than the spread between the first set of buttons. I don't want to add text after the first set and I've tried just using a blank space. Is there a better way to format these two side-by-side radio button sets?

Answer 1

Put them in separate <tr>s.

Answer 2

Maybe you should use more columns to your table, and more rows as well. And you should be using something else (like CSS instead), but don't get me started on that.

<table>
    <tr>
        <td><input id="Radio1" name="G1M" value="1" type="radio" /></td>
        <td><input id="Radio5" name="G1L" value="1" type="radio" /></td>
        <td>Gentle or kindly</td>
    </tr>
    <tr>
        <td><input id="Radio2" name="G1M" value="2" type="radio" /></td>
        <td><input id="Radio6" name="G1L" value="2" type="radio" /></td>
        <td>Persuasive, convincing</td>
    </tr>
    <tr>
        <td><input id="Radio3" name="G1M" value="3" type="radio" /></td>
        <td><input id="Radio7" name="G1L" value="3" type="radio" /></td>
        <td>Humble, reserved, modest</td>
    </tr>
    <tr>
        <td><input id="Radio4" name="G1M" value="4" type="radio" /></td>
        <td><input id="Radio8" name="G1L" value="4" type="radio" /></td>
        <td>Original, inventive, individualistic</td>
    </tr>
</table>

This <table> has one row for each option, and has one <td> for each radio button, and one <td> for the text.

You could also get off using CSS and <div>s instead.

<style>
input[type='radio'].spaceRight {
    margin-right: 10px;
}
</style>

<!-- do this for each row -->
<div>
    <input class="spaceRight" id="Radio1" name="G1M" value="1" type="radio" />
    <input class="spaceRight" id="Radio2" name="G1M" value="2" type="radio" />
    Gentle or kindly
</div>

Answer 3

<table>
            <tbody><tr style="background: none repeat scroll 0% 0% rgb(204, 204, 204);">
                <td>
                    <input type="radio" id="Radio1" name="G1M" value="1">&nbsp;<br>
                    <input type="radio" id="Radio2" name="G1M" value="2">&nbsp;<br>
                    <input type="radio" id="Radio3" name="G1M" value="3">&nbsp;<br>
                    <input type="radio" id="Radio4" name="G1M" value="4">&nbsp;
                </td>
                <td>
                    <input type="radio" value="1" name="G1L" id="Radio5">Gentle or kindly<br>
                    <input type="radio" value="2" name="G1L" id="Radio6">Persuasive, convincing<br>
                    <input type="radio" value="3" name="G1L" id="Radio7">Humble, reserved, modest<br>
                    <input type="radio" value="4" name="G1L" id="Radio8">Original, inventive, individualistic
                </td>
            </tr>

Answer 4

Set the width of the first <td>. If your 2nd <td> width is less than the actual text width after the radio button then putting them in separate <tr> is what you need to do. But i like what @zneak says, you might just get someone started here on saying why you shouldn't use tables? :)