Разделение элементов списка Thymeleaf на строки таблицы

Question

Я использую Thymeleaf для отображения атрибутов элементов списка на html-странице, например:

<table align="center">

    <tbody>
        <tr th:if="${movielist.empty}">
            <td colspan="2"> No movies found with the given parameters. </td>
        </tr>

        <tr>

            <td th:each="movie : ${movielist}">
                <table>
                    <tr>
                        <td><img th:src="@{${movie.imageLink}}" th:name="${movie.id}" onclick="selectElement(event)"/></td>
                    </tr>
                    <tr>
                        <td><a th:href="@{'/moviepage?id=' + ${movie.id}}" th:text="${movie.title}" align='center' /></td>
                    </tr>
                </table>
            </td>
        </tr>

    </tbody>
</table>

Это, конечно, показывает изображения и заголовки под ними в одной строке.Я хочу, чтобы элементы моего списка отображались в строках по три.Как я могу сделать это возможным?Я пробовал это с JavaScript, но я получил java.lang.StackOverflowError: null, и я уверен, что есть более простой способ, чем тот, который я пробовал:

<script th:inline="javascript">

        var movielist = [[${movielist}]];
        function showMovielist() {
            var html = '<tr>';

            for (var i = 0; i < movielist.length; i++) {
                html += '<td><table><tr><td><img src="' + movielist[i].imageLink + '"name="' + movielist[i].id + '" onclick="selectElement(event)"/></td>';
                html += '</tr><tr><td>';
                html += '<td><a th:href="@{' + '/moviepage?id=' + movielist[i].id + '}"text="' + movielist[i].title + '" align="center" /></td>';
                html += '</table></td>';
                if ((i+1)%3===0) {
                    html +='</tr><tr>';
                }
            }
            html += '</tr>';
            var where = document.getElementById("placeOfMovieList");
            where.innerHTML = html;
        }
    </script>

и тело, содержащее

<table align="center">

    <tbody>
        <tr th:if="${movielist.empty}">
            <td colspan="2"> No movies found with the given parameters. </td>
        </tr>
    <div id="placeOfMovieList" onload="showMovielist()"></div>


    </tbody>
</table>