HTML table formatting with django - html

Question

I'm creating an e-commerce website and I wanted to build a page where I could view a list of all the orders created.
If the order contains just 1 type of item, the format works correctly, but i can't think of a way to construct the table when there are multiple types of items ordered.
This is how it looks like when there are 2 items ordered (last entry):
I want the "Queso Burrito" to be right under "steak and egg burrito" for #18.
This is my code:
<table>
<tr>
<td>#</td>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Order</td>
<td>Order Quantity</td>
<td>Delivered</td>
</tr>
{% for ord in orders %}
<tr>
<td>{{ord.pk}}</td>
<td>{{ord.user.first_name}}</td>
<td>{{ord.user.email}}</td>
<td>{{ord.user.get_profile.phone}}</td>
{% for food in ord.orderitem_set.all %}
<td>{{food.name}}</td>
<td>{{food.quantity}}</td>
{% endfor %}
<td>x</td>
</tr>
{% endfor %}
</table>

Answer 1

With multiple items, you typically see tables with order data repeated for each line item.
{% for order in orders %}
{% for orderitem in order.items %}
<td>{{order.id}}</td><td>...</td>
{% endfor %}
{% endfor %}
If you want exactly the formatting you described, you could check if the inner loop is past its first item and hide the fields you don't want repeated.
<table>
{% for ord in orders %}
{% for item in ord.orderitem_set.all %}
<tr>
{% if forloop.counter == 1 %}
<td>{{ord.pk}}</td>
<td>{{ord.user.first_name}}</td>
<td>{{ord.user.email}}</td>
<td>{{ord.user.get_profile.phone}}</td>
{% else %}
<td colspan="4"></td>
{% endif %}
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{% if forloop.counter == 1 %}x{% endif %}</td>
</tr>
{% endfor %}
{% endfor %}
</table>