Grafiken ohne Lücke

Diese Seite demonstriert das lückenlose Aneinanderfügen von Grafiken in HTML. Probleme entstehen dadurch, dass Leerzeichen und Zeilenumbrüche im HTML-Code zwar selbst nicht angezeigt werden, wohl aber zu einer optischen Trennung von angezeigten Objekten führen. Das gilt nicht nur für Worte, sondern eben auch für Grafiken.

Sind die Image-Tags durch Leerzeichen von einander und vom dazwischen stehenden <br> getrennt:

<img...> <img...> <br> <img...> <img...>

sieht das Ergebnis so aus:

Auch wenn sich keine Leerzeichen zwischen den Tags befinden, diese aber im HTML-Code nicht auf einer Zeile stehen:

<img...> <img...> <br> <img...> <img...>

bleiben Spalten zwischen den Bildern, da Zeilenumbrüche wie Leerzeichen interpretiert werden:

Erst wenn alle Leerzeichen und Zeilenumbrüche an den entscheidenden Stellen entfernt werden:

<img...><img...><br> <img...><img...>

fügen sich die Teile der Grafik nahtlos aneinander:

Manchmal ist es sinnvoll, die Teile einer Grafik durch eine blinde Tabelle zusammenzufügen. Auch dort dürfen keine Leerzeichen und Zeilenumbrüche an Stellen auftreten, wo sie als Text interpretiert würden. Außerdem müssen border, cellpadding und cellspacing auf 0 gesetzt werden:

<table border=0 cellpadding=0 cellspacing=0> <tr> <td><img...></td> <td><img...></td> </tr> <tr> <td><img...></td> <td><img...></td> </tr> </table>

Das Ergebnis:

Diese Seite entstand aus einer Diskussion im SELFHTML-Forum.