Hi,

I want to modify HTML page attached. I am not able to make cells of district , division , zone , wasam close to each other ..

I want a desired look like this ...
dataupload_zpsc7ffe58b.jpg



Can you please tell what change I should do in this HTML ?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
			<tbody><tr>
				<td width="12">District:</td>
				<td width="12">Hambantota</td>
				<td width="12">Division:</td>
				<td width="12">Hambantota</td>
				<td width="12">Zone:</td>
				<td width="12">
				</td><td width="12">Wasam:</td>
				<td width="12">
			</td></tr>
				<tr>
					<td width="35%" valign="top">
					<table width="94%" cellspacing="6" cellpadding="0" border="0">
						<tbody><tr class="box_base">
							<td width="28%">Beneficiary Name</td>
							<td width="72%"><input type="text" value="" name="beneficiaryName" id="id_beneficiaryName"></td><td><p style="font-size:70%;">&nbsp;&nbsp;(*Min 3 character)</p></td>
						</tr>
					</tbody></table>
					</td>
				</tr><tr>
					<td width="35%" valign="top">
					<table width="100%" cellspacing="6" cellpadding="0" border="0">
						<tbody><tr class="box_base">
							<td width="10%">Beneficiary ID</td>
							<td width="90%"><input type="text" value="" name="beneficiaryId" id="id_beneficiaryID"></td>
						</tr>
					</tbody></table>
					</td>
				</tr>
				<tr>
					<td valign="top"><input type="button" onclick="findBeneficiary()" value="Search" class="submit_btn_base" id="srchBttn" name="Search"></td>
					<td valign="top">&nbsp;</td>
				</tr>
			</tbody></table>
 </BODY>
</HTML>