Inner table adds 1-2 pixels of padding on the left - html

Question

Let's say I have a table:
<table>
<tr>
<td>
Hello How are you this is a TEST!
</td>
<tr>
<tr>
<td>
<table>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</table>
<td>
<tr>
</table>
Just as an example, I have one TD in my main table, however I need to do 3 TD in my child table. If i do it as I shown above, it looks like this.
Hello How are you this is a TEST!
Hello this is a Test2!
The inner table gives me a padding-left of about 1-2 pixels. Is there any way to line up both statements?

Answer 1

Collapse your borders and remove your cell padding. Also you have a few td and tr tags improperly closed.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
table {
border-collapse: collapse;
}
table td {
padding: 0;
}
<table>
<tr>
<td>
Hello How are you this is a TEST!
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 2

Sure. That space is due to two factors:
Table cells, by default, have space between them. To collapse cells together, you need to apply border-collapse: collapse to the parent table.
Table cells have 1px of padding by default. You'll need to get rid of that by doing td { padding: 0; }
table {
border-collapse: collapse;
}
table td {
padding: 0;
}
<table>
<tr>
<td>
Hello How are you this is a TEST!
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</table>
</td>
</tr>
</table>
If you'd like a more visual example, you can check out this JSFiddle.

Answer 3

Try this:
<style>
table {
border-spacing:0;
}
td {
margin-left:0px;
padding-left: 0px;
}
</style>
...
<table>
<tbody>
<tr>
<td>
Hello How are you this is a TEST!
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>