index.html

<!DOCTYPE html>
<html lang = "pt_br" xmlns:th="http://thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>

<title>Foosball - Educando com saúde</title>

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet" />

<!--Import materialize.css-->
<link type="text/css" rel="stylesheet"
    href="materialize/css/materialize.min.css" media="screen,projection" />

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <h1>Lista de Alunos</h1>
    <h3>
        <a href="cadastrarAluno" class="waves-effect waves-light btn-large"><i
            class="material-icons left">add_circle_outline</i>Cadastrar Aluno</a>
    </h3>
    <table class="container">
        <thead>
            <tr>
                <th>Nome:</th>
                <th>Turma:</th>
                <th>Telefone:</th>
                <th>Email:</th>
                <th>Sexo:</th>
                <th>Alergia:</th>
                <th>Obs.:</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="turma : ${turmas}">
            <tr th:each="cadastro : ${cadastros}">

                <td><span th:text="${cadastro.nome}"></span></td>
                <td><span th:text="${turma.turma}"></span></td>
                <td><span th:text="${cadastro.telefone}"></span></td>
                <td><span th:text="${cadastro.email}"></span></td>
                <td><span th:text="${cadastro.sexo}"></span></td>
                <td><span th:text="${cadastro.alergia}"></span></td>
                <td><span th:text="${cadastro.obs}"></span></td>
            </tr></tr>


        </tbody>
    </table>

    <script type="text/javascript"
        src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="materialize/js/materialize.min.js"></script>
</body>


</html>