Layout CSS statt Tabellen

wie kann ich das Layout von folgender Seite statt mit einer Tabelle moderner mit CSS gestalten: Oder ist hier das Tabellenlayout ohnehin die bessere Wahl. Danke für die Hilfe.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<html lang="en" class=""> <head> <meta charset="utf-8"> <title>Teichfest 2018</title> <style> h2,p{ text-align:center; } img{ width:200px; } figure{ border:1px solid black; width:200px; padding:5px; margin:0; } figcaption{ text-align:center; } main{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: flex-start; align-items: flex-start; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <h2>Teichfest 2018</h2> <p>(Bilder zum Vergrößern anklicken)</p> <main> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png" ></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> <figure class="box"> <a href="Teichfest_2018_bild_1.htm"></p><img src="/image/10.png"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> </main> </body> </html>