HTML table styling and layout - html-table

Question

I'm trying to create a basic layout or four tables which sit side by side (with a small margin between the tables. Each table will have one row in the top section containing a currency symbol which will stretch the full length of the table and then below a second row will be subdivided into two cells with an input box and submit button.
There are two issues which I can't seems to find a solution for:
The top row divides into two cells. This means when the symbol is centered it centers to the left cell as opposed to the centre of the table (top row should stretch the full width of the table)
The row/ cells below contain a large amount of empty space above the input box and button which I can't seem to remove (have tried setting margin / borders to 0 etc.
Here is the code (borders added for clarity):
HTML
<table id = "pound_table">
<tr>
<td id = "pound_symbol">£</td>
</tr>
<tr id = "input">
<td id = "input"><input type = "text" name = "pound" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
<table id = "euro_table">
<tr>
<td id = "euro_symbol">€</td>
</tr>
<tr>
<td><input type = "text" name = "euro" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
<table id = "dollar_table">
<tr>
<td id = "dollar_symbol">$</td>
</tr>
<tr>
<td><input type = "text" name = "dollar" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
<table id = "yen_table">
<tr>
<td id = "yen_symbol">¥</td>
</tr>
<tr>
<td><input type = "text" name = "yen" size = "6" /></td>
<td><input type = "submit" value = "CONVERT" /></td>
</tr>
</table>
CSS
table
{
border-spacing: 0px;
border: 1px solid black;
margin-right:20px;
}
tr {
margin: 0;
padding:0;
border-spacing: 0px;
border: 1px solid black;
}
td {
border: 1px solid black;
margin: 0;
padding:0;
border-spacing: 0px;
}
#pound_symbol,
#euro_symbol,
#dollar_symbol,
#yen_symbol
{
text-align: center;
}
#pound_table,
#euro_table,
#dollar_table,
#yen_table
{
display: inline-block;
font-size:72px;
}
also see the fiddle;
http://jsfiddle.net/qs0dehhx/1/

Answer 1

Fixed, take a look: https://jsfiddle.net/zer00ne/aonc6we7/1/
HTML
For the the first row: <td colspan="2" id=...>
CSS
input { display: block; min-height: 100%; }