как получить элементы в отдельных строках в таблице html?

Question

Привет, я выбираю данные из файла Excel, но все данные возвращаются только в одной строке. Это мой html код

{% 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 %}

Это мой вывод введите описание изображения здесь

я хочу, чтобы данные были в отдельных строках, теперь они выглядят грязными, пожалуйста, помогите

Answer 1

Чтобы создать новую строку, вам необходимо добавить новый элемент <tr> для каждой строки.

Вот рабочий пример

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>

Каждый элемент <tr> внутри элемента <tbody> создает новую строку.