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.