<tbody>
<tr th:each="product, i : ${products}" class="product">
<td th:text="${i.index+1}">1</td>
<td><img class="thumbnail" th:src="@{/tournament/productThumbnail (index= ${product.getIndex()})}" alt=""></td>
<td th:text="${product.getName()}">이름1</td>
<td>
<div class="graph-box">
<div class="graph-stick" th:style="'width: ' + ${product.getRatio()} + '%;'"></div>
</div>
<span th:text="${product.getRatio() + '%'}">50%</span>
</td>
</tr>
</tbody>
th:each문에서 products 데이터 배열들을 불러와서 각 product라고 칭한다. 그리고 인덱스를 설정할 i 를 옆에 작성한다. 순위를 나타낼 부분을 th:text로 i.index+1 로 칭하면 1부터 데이터 갯수까지 반복하여 화면에 나타내게 한다.