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.

Der hier verwendete Code

<html lang="en" class=""><head> <meta http-equiv="Content-Language" content="de"> <meta name="GENERATOR" content="Dreamweaver CS 6"> <meta name="ProgId" content="Dreamweaver CS 6"> <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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg" ></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></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="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></a> <figcaption>Martin, Gustl, Bernhard und Franz warten auf den Startschuss.</figcaption> </figure> </main> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!