Too much spacing on <td> - TABLE - html

Question

I have some issues with my tables. It seems that the distance between the field name and text boxes are a bit big.
Are there any issues that I am making which causing this? How can I reduce the spaces? Check out the image below.
Here's my HTML:
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table border="0" border-collapse:collapse; width:80% colspan="3">
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td>[text* client-name] </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> [text* phone] </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td>[email* email]</td>
</tr>
<tr>
<td>Best time to call: </td>
<td>[select best-time "Morning" "Afternoon" "After 5pm"] </td>
</tr>
<tr>
<td>Address:</td>
<td> [text address]</td>
</tr>
<tr>
<td>City</td>
<td>[text city]</td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td>[text zip]</td>
</tr>
<tr><td colspan="2">Questions/Comments
[textarea questions id:questions]
</td></tr>
<tr><td colspan="2">[submit "Submit"]</td>
</tr>
</tbody>
</table>
Here is a JSFiddle demonstrating the issue: https://jsfiddle.net/sLv3e8f5/

Answer 1

The way the browser lays out tables by default, each column is sized to try to fit the width of its largest child element. In this case the largest child element is the table cell with the value "best time to call", which is causing the column to expand in width to accommodate that length.
You can give the first column of your table a fixed width to fix this, which will cause your longest line, "best time to call", to wrap.
In the following example I added an id to the table, then I targeted the first column of the table using CSS and gave it a width. I also gave your "Questions/Comments" form a width so it matches up.
Screenshot of the result:
Live Demo:
#thetable td:first-child {
width: 70px;
}
#qa {
width: 240px;
}
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table id="thetable" border="0" border-collapse:collapse; width:80% colspan="3" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Best time to call: </td>
<td><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </td>
</tr>
<tr>
<td>Address:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text"></td>
</tr>
<tr><td colspan="2">Questions/Comments
<textarea id="qa" rows="4" cols="50">
</textarea>
</td></tr>
<tr><td colspan="2"><input type="submit"></td>
</tr>
</tbody>
</table>
JSFiddle Version: https://jsfiddle.net/sLv3e8f5/2/

Answer 2

Try adding cellspacing="0"and cellpadding="0" on your table,

Answer 3

Add a
margin-left:3px;
to the
<td>
For example,
<td style="margin-left:3px;">[text* client-name]</td>

Answer 4

Your spaces are being caused by the "Best time to call" cell. Wrap that cell to two lines to remove the excess spaces.

Answer 5

because table cell is aligned by "Best time to call: ".
how about use <ul><li>

Answer 6

Getting rid of tables opens you up to a world of possibilities with CSS Styling.
The following is a very quick and dirty example:
label {
/*float:left;*/
width: 8em;
display:block;
clear:both;
margin-top: 10px;
}
input, select {
float:left;
margin-top: 10px;
margin-left: 20px;
}
label.required::after {
content:'*';
color: #F00;
padding-left:0.25em;
}
.required+input, .required+select
{
background-color:#FCC;
}
<fieldset>
<legend>Free Room of Cleaning & Carpet Audit</legend>
<label class="required" for="name">Name:</label>
<input type="text" id="name" name="name" />
<label class="required" for="phone">Phone:</label>
<input type="text" id="phone" name="phone" />
<label class="required" for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="call">Best time to call:</label>
<select id="call" name="call">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="Address">Address:</label>
<input type="text" id="Address" name="Address" />
</fieldset>