How to set border to 0 in this table - html

Question

In the image above First Name and Textfield are not aligned from the left. I don't know whether its border or padding. But the image inside is conditionally visible. How to get rid of it just by html and css.
<div id=first_name>
First Name<br />
<table>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' /></td>
<td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->

Answer 1

The problem was that even though you have the image hidden, there is still a <td> element, I made a few changes to the code, I put the First Name into a <td> to align with your input. Also wrapped it in a label. I removed the td the image was in, you could either put it in the same cell as the input, or dynamically add it with javascript and take it out completely (this would be my approach).
<div id=first_name>
<table>
<tr>
<td>
<label for='form_first_name'>First Name:</label>
</td>
</tr>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none;' /><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->

Answer 2

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image"
id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1"
type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2">
<span class="error_msg" id="form_first_name_err_msg"
style='display: none'>This cannot be left blank.
</span>
</td>
</tr>
</table>
try this

Answer 3

Set border to 0 in table tag as shown below
<table border="0">

Answer 4

HTML
<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>
</td>
</tr>
</table>
Demo
OR
HTML
<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>First Name:
</td>
</tr>
<tr>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
</tr>
<tr>
<td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
</td>
</tr>
</table>
</div>
Demo

Answer 5

While putting the archaic: <table cellspacing="0" cellpadding="0"> would still produce good enough results in most (backward compatible) browsers, attributes cellpadding and cellspacing are not supported in HTML5 and shouldn't be used.
Rather put something like this in your stylesheet:
#first_name table {
border-collapse: collapse;
border-spacing: 0;
}
#first_name td {
padding: 0;
}
#first_name input {
margin: 0;
}
Of course, you can add classes to your elements and update the stylesheet accordingly.
TIP: For future similar problems, try using dev tools in your browser of choice and investigate what default style is being applied to the elements, so you can adjust accordingly.