Jekyll and Liquid - Filling table rows with array - arrays

Question

I'm having some trouble filling table rows with an array.
What I would like to achieve:
The header row and the first column work fine, but I don't get the numbers right, that the first row contains ONLY the first number of the array (i.e. 50), the second row only the second number from the array etc.
My code:
---
exercises: [Burpees, Squats, Pull ups, Push ups]
rounds: 5
reps: [50, 40, 30, 20, 10]
---
<table class="responsive-table">
<thead>
<tr>
<th scope="col">Round</th>
{% if page.exercises %}
{% for exercise in page.exercises %}
<th scope="col">{{ exercise }}</th>
{% endfor %}
{% endif %}
</tr>
</thead>
<tbody>
{% for n in (1..{{page.rounds}}) %}
<tr>
<th scope="row">Round {{ n }}</th>
<!-- THIS PART DOESNT WORK
{% for exercise in page.exercises %}
<td data-title="{{ exercise }}"> {{ page.reps }} </td>
{% endfor %}
-->
</tr>
{% endfor %}
</tbody>
</table>
How can I fill the cells the way in the picture?

Answer 1

exercises: [Burpees, Squats, Pull ups, Push ups]
reps: [50, 40, 30, 20, 10]
---
<table class="responsive-table table">
<thead>
<tr>
<th scope="col">Round</th>
{% for exercise in page.exercises %}
<th scope="col">{{ exercise }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% assign total = 0 %}
{% for rep in page.reps %}
{% assign total = total | plus: rep %}
<tr>
<th scope="row">Round {{ forloop.index }}</th>
{% for exercise in page.exercises %}
<td data-title="{{ exercise }}"> {{ rep }} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th scope="row">Sum</th>
{% for exercise in page.exercises %}
<td>{{ total }}</td>
{% endfor %}
</tr>
</tfoot>
</table>