HTML Decrease row spacing and column width - html

Question

I have a problem. I created the following form:
.input-block {
width: 100%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-spacing: 0;
}
.input-block td {
width: 10%
}
.input-block input, select {
width: 50%;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Wachtwoord veranderen</h2>
<table>
<tr>
<td>
<span>Nieuw wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
<tr>
<td>
<span>Herhaal wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Profiel informatie</h2>
<table>
<tr>
<td>
<span>Geslacht</span>
</td>
<td>
<select id="geslacht" name="geslacht">
<option value="man" selected>Man</option>
<option value="vrouw">Vrouw</option>
</select>
</td>
</tr>
<tr>
<td>
<span>Nationaliteit</span>
</td>
<td>
<select id="nationaliteit" name="nationaliteit">
<option value="nederland" selected>Nederland</option>
<option value="belgie">Belgie</option>
<option value="duitsland">Duitsland</option>
<option value="frankrijk">Frankrijk</option>
</select>
</td>
</tr>
</table>
</div>
Now, this is almost like the way I want, but I can't change 2 things:
I want to decrease the row spacing in the table, so the items are more compact on the screen. The space doesn't need to be gone, but a bit smaller
The input boxes and the names before the input boxes can be closer to each other. I already tried to set a width of 10% on the td in the table, but that didn't work.
Can someone help me change the layout?

Answer 1

I adjusted your code a bit, mostly just the CSS.
Are you looking for something that's more like this?
I put a set width on your input
.input-block input, select {
width: 300px;
font-size: 16px;
}
and decreased width of your input block
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.input-block td {
width: 10%;
}
.input-block input, select {
width: 300px;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
</div>