Displacement of <td> and <tr> - html

Question

This should be super easy to solve. I have the following code that is not working the way I would like it to. The aim is to have something like this, with the BUTTON on the right of the "1 2 3 4 table":
1 2 BUTTON
3 4
but all I get is almost the same disposition with the button as a 3rd line. What am I missing?
<tr>
<td>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>

Answer 1

If you want to have an inner table, it needs its own set of <table> tags:
<table>
<tr>
<td>
<table>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</table>
</td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
</table>
Otherwise, your "inner" trs are actually being treated as a second and third row in your outer table, causing the displacement. The td containing the button appears in a new row after the rows with numbers. The result is a table with missing a <tr> start tag and some unexpected <td>/</td> tags. Here's your original markup re-indented and "fixed" (including the outer <table>/</table> tags that for whatever reason are not shown in the question) to show you what I mean:
<table>
<tr>
<td>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
<tr>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
</table>
Note that <tr> and <td> have optional end tags, which means the markup above is completely valid even though the first tr and td are missing their end tags, and is the reason why your original markup is being treated the way it is.

Answer 2

You should move your button to the first table row. And your HTML is not valid — you can't put <tr> into <td>, only vice versa. From the specification:
Contexts in which this element can be used:
As a child of a thead element.
As a child of a tbody element.
As a child of a tfoot element.
As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element.
Check out my snippet:
td {
padding: 5px 20px;
}
<table>
<tr>
<td>1 </td>
<td>2 </td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
<td></td>
</tr>
</table>

Answer 3

You have included eveything inside one <tr> tag. You need 2 separate <tr> tags, i.e, 2 rows and button should be outside the <table> tag.
Then using CSS you need to set the display of both table and button to inline-block and then using position property of CSS, you can position button to the desired position.
As you also want some space between two columns of the table, you can use   to add some space between two columns of your table.
To add some space between table and button, add some padding to the left side of the button.
.but {
display: inline-block;
position: relative;
top: -30px;
padding-left: 40px;
}
table {
display: inline-block;
}
<table>
<tr>
<td>1</td>
<td>  </td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>  </td>
<td>4</td>
</tr>
</table>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>