Im Ghost Blog ist es sehr einfach, Bilder in eine HTML Tabelle einzufügen. Grundsätzlich muss das Bild bereits im Internet mit einem Link vorhanden sein. Dann muss dieser Link nur noch in eine Image Klammer kopiert werden. Wie das ganze aussieht, erfährst du in diesem Post.

Gründe für Bilder in einer HTML Tabelle

Es gibt verschiedenste Anwendungsfälle, warum man Bilddateien in einer HTML Tabelle darstellen möchte. Hier findest du einige Beispiele:

Strukturierte Darstellung

Durch eine HTML Tabelle ist es möglich, Bilder geordnet darzustellen. Die Darstellung in Reihen und Spalten macht es möglich, auch große Mengen von Fotos sinnvoll und übersichtlich am Bildschirm auszugeben.

Bilder vergleichen (vorher und nachher)

Wird ein Bild bearbeitet oder verändert, kann mit einer HTML Tabelle das neue Bild mit dem Alten verglichen werden. Dazu ordnet man das ursprüngliche Bild gleich neben dem bearbeiteten Bild an.

Veranschaulichen von Begriffen in Tabellen

Manchmal sind Bilder ein Teil von HTML Tabellen, um dem danebenliegenden Text zu veranschaulichen und zu diesem zusätzliche Erklärungen zu liefern. So sind bestimmte Fachbegriffe oft abstrakt und für den ein oder anderen "böhmische Dörfer", mit dem richtigen Foto daneben in der Tabelle sind diese dagegen schon fast selbsterklärend.

Responsive Webdesign

Eine HTML Tabelle kann helfen, mehrere Bilder nebeneinander auch auf verschiedenen Geräten immer in der richtigen Größe anzuzeigen. Dazu kann es nötig sein, der Tabelle noch zusätzliche Attribute zur Größe der Zellen mitzuteilen.

Anwendung: Bilder in HTML Tabelle anzeigen

Anschaulich wird das ganze durch dieses Beispiel:

Hier haben wir eine 2x2 Tabelle, in der in jeder Zelle ein Bild steckt. Der HTML Code dazu sieht folgendermaßen aus:

<table>
  <tr>
    <td><img src="https://www.number13.de/content/images/2019/04/Factory-Town.jpg" width="300"></td>
    <td><img src="https://www.number13.de/content/images/2019/03/League-of-Legends.jpg" width="300"></td>
  </tr>
  
  <tr>
    <td><img src="https://www.number13.de/content/images/2019/07/Shakes-and-Fidget.jpg" width="300" ></td>
    <td><img src="https://www.number13.de/content/images/2019/07/Eco.jpg" width="300"></td>
  </tr>
</table>
Bild eine Verlinkung anfügen in HTML
Um einem Bild eine Verlinkung anzufügen, sodass ein Klick auf das Bild zu einer neuen Seite führt, benötigt man das HTML Attribut href (Hypertext Reference). Wie das ganze funktioniert, erfährst du in diesem Post.
number13.dejulian

Zwischen der Klammer <td></td> wird für ein Bild folgender Code benötigt:

<img src="https://www.number13.de/content/images/2019/04/Factory-Town.jpg">

Der Link des Bildes steht zwischen den Gänsefüßchen. Um alle Bilder in der Tabelle gleich groß zu machen, habe ich noch die Breite aller Bilder mit width="300" vereinheitlicht. Solche Attribute werden auch in die <img> Klammer geschrieben.

HTML