image description hereI'm facing an issue with displaying a table in HTML. I've been struggling for three days to find a solution, asked multiple questions without success. Any help would be greatly appreciated. I am trying to use the table tag and th:each to showcase a list of items. Each item from the table in the database is considered as one piece, and I want to list them in two columns across the table. However, when using the table tag, it only displays one field per line. This means my goal of having two fields in a row is not achieved. How can I resolve this problem? (Image: Desired Design)
The code snippet I have written is:
<table th:each="Vocalist: ${bookLis}">
<td>
<div class="bookdiv" id="startButton">
<img src="images/ClosedBook.png" class="closeBook">
<span class="bookName" th:text="${Vocalist.vocaName}">title</span>
</div>
</td>
</table>
I also tried using CSS grid but it didn't yield the desired result.