how to insert gap between rows of a table? - html

Question

i want to add gap betweenw my input boxes in input form.
They are heavily packed together and not looking good.
so that the input form looks and feels good...form is a object passed from views.py....
createcustomer.html
{% extends 'customer/base.html' %}
{% block title %}Create Customer{% endblock %}
{% block body %}
<div class="container-fluid" style="background-color: #f2f2f2; width:100%; height:135%;" >
<div class="row ">
<div class="col-lg-4"></div>
<div class="col-lg-8 text-left" align="center">
<h2>Create a Customer</h2>
<form action="." method="post">
<div class="form-group" >
{% csrf_token %}
<table>
<tr style="width:100%;" class="highlight">
<td>First Name:</td>
<td>{{form.fname}}</td>
</tr>
<tr>
<td>Last Name:</td>
<td>{{form.lname}}</td>
</tr>
<tr>
<td>Email:</td>
<td>{{form.email}}</td>
</tr>
<tr>
<td>Address:</td>
<td>{{form.address}}</td>
</tr>
<tr>
<td>City:</td>
<td>{{form.city}}</td>
</tr>
<tr>
<td>State:</td>
<td>{{form.state}}</td>
</tr>
<tr>
<td>Zip:</td>
<td>{{form.zip}}</td>
</tr>
<tr>
<td>Username:</td>
<td>{{form.uname}}</td>
</tr>
<tr>
<td>Phone:</td>
<td>{{form.phone}}</td>
</tr>
</table>
<div style="margin-left:200px; margin-top:20px;margin-bottom:20px">
<input type="submit" class="btn btn-success" value="Submit">
</div></div>
</form>
</div>
</div>
</div>
{%endblock%}

Answer 1

you can try with css:
table tr {
margin-bottom: 10px;
display: table;
}

Answer 2

add table to cellspacing & cellpadding
<table cellspacing="1" cellpadding="1">

Answer 3

You can apply padding to the input itself by applying a class and css:
HTML
<input id="padded" type="submit" class="btn btn-success" value="Submit">
CSS
#padded {
padding: 10px;
}
This will create space around the input form, giving it room to breath.