Platzierung von Images und Textboxen in einer Tabelle

[xyz]

Moin
wer ein Galaxy hat, kennt die Eingabe-Fenster, solch eines wollte ich nachbauen mit HTML/ CSS.
Hier mein Nachbau:

Ich hätte gern, dass plus, minus und Input vertikal direkt angrenzen, horizontal soll ein Abstand zur nächsten Spalte bleiben. Außerdem habe ich Probleme, die Inputs auf die Breite der Images zu bringen.

HTML dazu:
<div id="input">
<table id="top"><tr><td id="titel" >Einstellen ...</td></tr>>/table>
<table id="body"><tr><td>
<a href="#" id="Button1" onclick="wert('Button1')"><img src="plus.png" /></a>
<a href="#" id="Button2" onclick="wert('Button2')"><img src="plus.png"/></a>
<br/>
<input id="kg" type="text" />&nbsp;<input id="anz" type="text" />
<br/>
<a href="#" id="Button3" onclick="wert('Button3')"><img src="minus.png"/></a>
<a href="#" id="Button4" onclick="wert('Button4')"><img src="minus.png"/></a>
</td></tr></table>
<table id="fuss"><tr><td>
<input id="Button5" type="button" value="OK" onclick="layer_aus();" />
<input id="Button6" type="button" value="Zurück" onclick="abbrechen()" />
</td></tr></table>
</div>

CSS dazu:
td {text-align: center; border:none; width:250px; height:40px; }
a {color:#333333;}

#top {width:250px; height:40px; color:white; font-size:x-large; background-color:#333333; border-bottom:1px solid lightgray;}

#body {width:250px; height:120px; background-color:#333333;border-bottom:1px solid lightgray; border-collapse:collapse; border-spacing:0px; padding:0px;}
    #kg      {font-size:x-large; width:70px; height:40px;  text-align:center;  }
    #anz     {font-size:x-large; width:70px; height:40px;  text-align:center;   }

#fuss {width:250px; height:40px; background-color:grey ;}
    #Button5 {width: 115px; font-size:x-large; }
    #Button6 {width: 115px; font-size:x-large;    }

Woher kommen die Zwischenräume? Wie erreicht man, dass alle 3 übereinanderstehenden Elemente gleich breit sind?

Gruß Tom