How to use HTML radio buttons with proper alignments

If you want to provide a set of radio buttons with some text infront of each button in an HTML page, you have to use a table to do that. Basic code is shown below.

<table>
<tr>
<td><input id=”foo” type=”radio” value=”none”/>Selection1</td>
</tr>
<tr>
<td><input id=”bar” type=”radio” value=”none”/>Selection2</td>
</tr>
</table>

But the output of the above code won’t be properly aligned. If you want to make it properly aligned, you have to use a separate ‘td’ for your text. And also, you have to set the vertical alignment of your text to middle. Proper code is given below.

<table>
<tr>
<td><input id=”foo” type=”radio” value=”none”/></td>
<td style=”vertical-align:middle;”>Selection1</td>
</tr>
<tr>
<td><input id=”bar” type=”radio” value=”none”/></td>
<td style=”vertical-align:middle;”>Selection2</td>
</tr>
</table>

Advertisements

About isurues
Age : 24 Date of Birth : 05.11.1984 Country : Sri Lanka

One Response to How to use HTML radio buttons with proper alignments

  1. Ed says:

    Hi. I have a HTML page that has a simple table filled with Flash items in each table cell.

    I have been wondering how I could use a radio button to switch them all “on” at once, from an initial “off” state when page loads.

    When the page loads, each table cell will have a simple jpg or gif image where each flash presentation will show when the radio button is clicked “on.” After that, the toggle will implement the group of flash items at once each time the radio button is toggled “on.”

    The table has 3 cells on each of 3 rows. Right now, the flash activates whenever the HTML document is loaded.

    It should be simple coding but I don’t know how to do it just using tables and DHTML with NO FORM. Can you help??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: