Collage in einer HTML Tabelle

HTML Tabellen spielten bis vor einiger Zeit eine große Rolle im Webdesign. Vor dem Hintergrund der neueren Gestaltungsmöglichkeiten wird die Tabellentechnik heute weniger angewandt.

Die HTML Tabellen lassen sich auch bei unserem Blogeditor nutzen. So wird es möglich, etwas von den "sperrigen" Editor-Eigenschaften zu umgehen. Beispielhaft habe ich dies für eine Collage mit neun Bildern dargestellt. Viele weitere "Spielereien" sind denkbar, z.B. ein Tabellenhintergrundbild mit wenigen Bildern in den Zellen...

Juist im Sommer 2009
(Die Originalbilder können über einen Klick auf das Miniaturbild geöffnet werden)

Ausgangspunkt ist eine "einfache" HTML Tabelle mir drei Zeilen und drei Reihen. Die Tabelle hat einen farbigen Hintergrund und eine Umrandung von einem Pixel. Damit es später im Blog gut aussieht, wurde sie in einem zentrierten Container gesetzt.

Der HTML Code:

 

Zur besseren Übersicht im Editor wurden die einzelnen Zellen numeriert. Diese Nummern werden bei der Bearbeitung wieder gelöscht. Es ist zweckmäßig, dass man das Tabellengrundgerüst als Textdatei auf dem PC speichert.

Die Bearbeitung:

Den oben angegebenen HTML Code fügen wir über den HTML Modus des Editors in den Post.

Tabelle im Verfassen-Modus

Nun fügen wir in jeder Zelle ein Bild ein. Die Bilder befinden sich in diesem Beispiel bereits in einem Picasa-Webalbum. 

 Die Bilder setzen wir auf "Klein" und orientieren nach "links".

Wichtig: 

Zellenziffern löschen. Es dürfen keine Leerzeilen in den Zellen sein.

Unser Editor sollte nun so aussehen  ------>

Betrachtet man nun den Post in der Vorschau, wird man einen kleinen Schrecken bekommen ;-))

Was ist geschehen: Die Bilder sind zu groß. Insofern wird unsere Seitenleiste tlw. überdeckt.

Die Bilder werden so verkleinert, dass die Tabelle nicht mehr die Seitenleiste berührt. Dies realisieren wir in der HTML Ansicht unseres Editors. Die Verkleinerung ist  von unserem Blogdesign abhängig. Im vorliegenden Fall wurden die Bilder auf 170px in der Breite und 130px in der Höhe verkleinert (4:3).

Anschliessend müssen noch die Bildzwischenräume  beseitigt werden. Hierzu setzen wir die Abstände bei allen Bildern auf  0em.

Ergebnis:

Im Editor sollte nun die nebenstehende Anordnung zu sehen sein.

Alle Bilder haben die gleiche Größe. Die Abstände sind gleich .

Auch unsere Voransicht zeigt ein gutes Ergebnis. Die Randleiste ist frei :-))

Hier  sieht man die unterschiedlichen Interpretationen der einzelnen Browser. Firefox zeigt zwischen den Zeilen einen etwas breiteren Abstand. IE hat mit der Darstellung Probleme. Setzt man jedoch den Rahmen auf 0 Pixel  also border="0" , dann bringt der IE die Tabelle wie im Editor. Mit beiden Darstellungen kann man aber leben...