Tipps für viele Bilder - Redundanz vermeiden

[Maetzzen]

Hallo zusammen,

ich bräuchte Hilfe bezüglich des Fotoalbums unserer Vereinswebseite. Ich benutze zur Darstellung der Bilder diese "Lightbox", damit diese hübsch aussehen und das Fotoalbum leicht zu bedienen ist.

Die Fotoalben sind auf verschiedene HTML-Seiten verteilt, eben nach Vereinsfesten oder Jahrgängen geordnet. Dazu habe ich mehrere Tabellen erstellt, in denen sich Pro Zeile vier Miniaturbilder befinden, welche dann beim anklicken das größere Bild in der Lightbox anzeigen. Beispielbild

Nur leider wird das alles immer unübersichtlicher, je mehr Fotos ich hinzufüge, was an folgendem Beispiel bestimmt nachvollziehbar ist:

<h1 class="headliner">Ausfahrt Black Forest</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/ausfahrt/blackforest2016/1.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/ausfahrt/blackforest2016/2.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/ausfahrt/blackforest2016/3.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/3mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/ausfahrt/blackforest2016/4.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/4mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/ausfahrt/blackforest2016/5.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/5mini.jpg" class="albumcover"/></a></td>
            <td><a href="../fotos/alben/ausfahrt/blackforest2016/6.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/6mini.jpg" class="albumcover"/></a></td></tr>
    </table>
    
    <h1 class="headliner">Bierprämierung mit Bierkönig</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/sonstiges/bierprobe2016/1.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/2.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/3.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/3mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/4.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/4mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/sonstiges/bierprobe2016/5.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/5mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/6.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/6mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/7.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/7mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/8.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/8mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/sonstiges/bierprobe2016/9.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/9mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/10.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/10mini.jpg" class="albumcover"/></a></td>
        </tr>
    </table>
    
    <h1 class="headliner">B-Party</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/bparty/bparty2016/1.jpg" data-lightbox="roadtrip" title="Buchhau-Party 2016"><img src="../fotos/alben/bparty/bparty2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/bparty/bparty2016/2.jpg" data-lightbox="roadtrip" title="Buchhau-Party 2016"><img src="../fotos/alben/bparty/bparty2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/bparty/bparty2016/3.jpg" data-lightbox="roadtrip" title="Buchhau-Party 2016"><img src="../fotos/alben/bparty/bparty2016/3mini.jpg" class="albumcover"/></a></td><td></td></tr>
    </table>
    
    <h1 class="headliner">Motorradweihe</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/weihe/weihe2016/1.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/2.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/3.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/3mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/4.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/4mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/weihe/weihe2016/5.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/5mini.jpg" class="albumcover"/></a></td>
            <td><a href="../fotos/alben/weihe/weihe2016/6.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/6mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/7.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/7mini.jpg" class="albumcover"/></a></td></tr>
    </table>

Nun zu meiner Frage. Inwiefern ist es schlimm, wenn ein HTML/PHP Dokument aus sehr vielen immer wiederkehrenden Zeilen besteht, außer der Tatsache, dass ich die Übersicht verliere?

Wie kann ich das Problem beseitigen? Die Alben sind ja immer nach dem selben Schema aufgebaut.. Das Album besteht aus Tabellen, diese bestehen aus Links, die kleine Miniaturbilder beinhalten und den Pfad zum eigentlichen Bild. Die Bilder sind immer nach dem selben Schema benannt (Zahlenfolge.jpg / Zahlenfolgemini.jpg).

Wie kann ich also auch mehrere (hundert) Bilder auf einer Website darstellen ohne dass es mit einem riesigen Dokument (was die Anzahl der Zeilen und Zeichen angeht) endet?

Ich bedanke mich schon mal für eure Antworten. Gerne nehme ich wieder verweise auf andere Tutorials an.

Vielen Dank!

Gruß Maetzzen