Why will my HTML table not display correctly - html

Question

I have a simple example of an html table yet it will not display correctly and I do not understand why.
code for the table:
<div class="container">
<form id="testform" data-parsley-validate>
<div class="row">
<input class="form-control typeahead" name="customerSearch" type="text"
placeholder="Customer Search:" autofocus="on"
autocomplete="off" spellcheck="off" data-open="open" data-close="close"
data-select="select" data-autocomplete="autocomplete"
data-source="customersTypeAhead"/>
<button type="button" class="btn btn-warning">Clear</button>
<button type="button" class="btn btn-success">Create</button>
</div>
<div class="row">
<div class="col-md-4 smPadding">
<br>
<!-- Customr Contact info and factoring company info -->
<input class="form-control box-size" type="text" name="customerName" placeholder="Customer:"
data-parsley-trigger="change" minlength="6" required />
<input class="form-control box-size" type="text" name="customerAddress" placeholder="Address:"
data-parsley-trigger="change" minlength="6" required />
<table>
<tr>
<td>
<input class="form-control box-size" type="text" name="customerSuite" placeholder="Suite:" />
</td>
<td>
<input class="form-control box-size" type="text" name="customerCity" placeholder="City:"
data-parsley-trigger="change" minlength="3" required />
</td>
</tr>
<tr>
<td>
<input class="form-control box-size" type="text" name="customerState" placeholder="State/Prov:"
data-parsley-trigger="change" minlength="2" maxlength="2" required />
</td>
<td>
<input class="form-control box-size" type="text" name="customerZip" placeholder="Zip/Postal:"
data-parsley-trigger="change" minlength="5" required />
</td>
</tr>
</table>
<input class="form-control box-size" type="text" name="customerPhone1" placeholder="Phone 1:"
data-parsley-trigger="change" minlength="10" required />
<input class="form-control box-size" type="text" name="customerPhone2" placeholder="Phone 2:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="customerFax" placeholder="Fax:"
data-parsley-trigger="change" minlength="10"/>
<input type="checkbox" name="customerFactorInvoices" {{isFactoredCheckAnswer}}> Does Company Use Invoice Factoring?<br>
{{#if isFactoredCheck}}
<input class="form-control box-size" type="text" name="factoringName" placeholder="Customer:"
data-parsley-trigger="change" minlength="6" {{factorRequired}}/>
<input class="form-control box-size" type="text" name="factoringAddress" placeholder="Address:"
data-parsley-trigger="change" minlength="6" {{factorRequired}}/>
<table>
<tr>
<td>
<input class="form-control box-size" type="text" name="factoringSuite" placeholder="Suite:"
data-parsley-trigger="change" />
</td>
<td>
<input class="form-control box-size" type="text" name="factoringCity" placeholder="City:"
data-parsley-trigger="change" minlength="3" {{factorRequired}} />
</td>
</tr>
<tr>
<td>
<input class="form-control box-size" type="text" name="factoringState" placeholder="State/Prov:"
data-parsley-trigger="change" minlength="2" maxlength="2" {{factorRequired}} />
</td>
<td>
<input class="form-control box-size" type="text" name="factoringZip" placeholder="Zip/Postal:"
data-parsley-trigger="change" minlength="5" {{factorRequired}} />
</td>
</tr>
</table>
<input class="form-control box-size" type="text" name="factoringPhone1" placeholder="Phone 1:"
data-parsley-trigger="change" minlength="10" />
<input class="form-control box-size" type="text" name="factoringPhone2" placeholder="Phone 2:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="factoringFax" placeholder="Fax:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="factoringEmail" placeholder="Email:"
data-parsley-trigger="change" />
{{/if}}
</div>
<div class="col-md-4 smPadding">
<br>
<input class="form-control box-size" type="text" name="customerEmail1" placeholder="Email 1:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles1" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles1" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles1" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles1" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail2" placeholder="Email 2:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles2" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles2" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles2" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles2" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail3" placeholder="Email: 3"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail4" placeholder="Email 4:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles4" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles4" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles4" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles4" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
</div>
<div class="col-md-4 smPadding">
<br>
<input type="checkbox" name="customerOriginalInvoices" value="true" > Customer Require Original Invoices<br>
<input type="checkbox" name="customerAccountHold" value="true" > Account on Hold<br>
</div>
</div>
</form>
</div>
The css that I was asked to place in
th, td {
width: 50%;
text-align: left;
}
picture of the problem.
Picutre of the full form showing that the textboxes line up proper with the table code.
Picture after applying the above css. Seems to make it worse.
So if you can tell me what I am doing wrong here it would be greatly appreciated.

Answer 1

This is the proper way after some research on div layouts.
<div class="row">
<div class="col-md-6">
<input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create<br>
<input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
</div>
<div class="col-md-6">
<input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing<br>
<input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
</div>
</div>