CODEWITHSUNDEEP
htmlcsshtml-tablemargin
JavaChipMocha
JavaChipMocha

Reputation: 189

Aligning a checkbox next to a <td> in html

I have a basic CSS/html question about using html/CSS. I thought this was fairly basic and obvious, however it is not working as intended.

http://puu.sh/2LuHq.png

In this basic image, I would want the Labels to be to the right of Expertise

(creating a registration page where the user selects their Expertise)

I would believe this is basically

 <tr>

 <td>Expertise</td>
  <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>            
  <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>

</tr>

however this is not working as intended.

Upvotes: 1

Views: 1819

Answers (2)

emijayne
emijayne

Reputation: 46

Since you are already using tables, just place the input tags into another td tag like this:

<tr>

 <td>Expertise</td>
 <td>
  <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>            
  <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>
 </td>

</tr>

This will make the checkboxes appear to the right of "Expertise".

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

First of all your markup is invalid, table element can only have elements which are meant for table as their child elements i.e tbody, thead, th, tr, td etc, and no other elements, instead you can place those checkboxes inside td

Secondly input tag doesn't have any explicit closing tag, you need to self close it, else leave it without closing just like <br>

Third - Use label tag instead of having stray text besides checkbox

Demo

The right way

<table>
  <tr>
    <td class="valign">
        Expertise
    </td>
    <td>
        <input type="checkbox" style="vertical-align: left; margin: 12px;" />
        <label>Label</label><br />
        <input type="checkbox" style="vertical-align: left; margin: 12px;" />
        <label>Labe2</label>
    </td>
  </tr>
</table>

CSS

.valign {
    vertical-align: top;
}

Upvotes: 5

Related Questions