Can't remove spaces between <td> - html

Question

I'm trying to create a "register" page in HTML and I made the table to the center. But when I moved the table to the center there was a huge gap between 's.
I tried "cellspacing" but it doesn't work since im working with HTML5.
I also tried "border-spacing:0px;" but it doesn't work either.
I'm using latest version of Chrome and Sublime Text
Code:
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 650px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>

Answer 1

Sometime when any style issue is there the reason can be style of parent control. In this case Table is nested inside Form control, so need to change style of form control first,after changing style of form position has change and for space little change in padding of table.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 650px;
padding: 50px;
}
form {
margin-top:20%;
margin-left:10%;
margin-right:10%;
margin-bottom:20%;
width: 80%;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>

Answer 2

Are you looking for this result?
Edit
removed height: 650px; from table.table
The height for each row was too high because You set the height of the table to a specific value [in your case 650px] and row heights were evenly distributed.
The solution is either to remove the height property or adjust the height according to your need.
Please note, this will not guarantee browser compatibility. It will be good to go with proven CSS frameworks like bootstrap to achieve the same result with responsiveness and browser compatibility.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td width="20%">
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>

Answer 3

In your css code, you have fixed the height = 600px, which actually takes control of the inner size of the table and stretches table to become 600px in size. To use border-spacing, you can just remove the height of table and update the value of border-spacing, then it will show you the actual spacing that you want to use in it.
I have updated your code below, just run and enjoy ;)
<!DOCTYPE html>
<html>
<style type="text/css">
body{
background-color:#8F3985;
}
table.tablo{
background-color:#07BEB8;
margin-left:auto;
margin-right: auto;
width:600px;
border-spacing: 5px;
}
</style>
<head>
<title></title>
</head>
<body>
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
</body>
</html>

Answer 4

These properties should work.
table {
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
tbody, tr {
width: 100%;
}
table.tablo, table.tablo * {
box-sizing: border-box;
}
table.tablo {
width: 600px;
margin-right: auto;
margin-left: auto;
background-color: #07beb8;
}
table.tablo td {
width: 50%;
vertical-align: top;
padding: 0; /* change in whitespace you like */
}
table.tablo td:first-child {
width: 100%;
}
and use for the header
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>