how to get elements in separated rows in html table? - html

Question

Hey i am fetching data from excel file but all the data is returning in only one row box this is my html code
{% block body %}
# i am using bootstrap table class
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Pensioner name</th>
<th scope="col">cnic</th>
<th scope="col">mobile</th>
<th scope="col">wallet</th>
</tr>
</thead>
<tr>
{% if 'm1' %}
<td><h6 >{{ m1 }}</h6></td>
{% endif %}
{% if 'm2' %}
<td><h6 >{{ m2 }}</h6></td>
{% endif %}
{% if 'm3' %}
<td><h6 >{{ m3 }}</h6></td>
{% endif %}
{% if 'm4' %}
<td><h6 >{{ m4 }}</h6></td>
{% endif %}
</tr>
</table>
{% endblock %}
this is my outputenter image description here
i want data into separate rows boxes now it looks to messy please help

Answer 1

To create a new row you would need to add a new <tr> element for each row.
Here is a working example
table,
tr,
th,
td {
border: solid 1px;
}
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
Each <tr> element inside the <tbody> element creates a new row.