Newsletter-Anmeldung

Bitte gewünschte Mailingliste(n) vor dem Absenden markieren:

Anmelden

Tabellen eignen sich hervorragend zur formatierten Darstellung von Inhalten wie Text bzw. Bilder.

In diesem Beispiel wird eine Seite mit Bildern/Funktionen der (fiktiven) Mitglieder erstellt. Die Tabelle soll den verfügbaren Platz in der gesamten Breite (100%) einnehmen. Bilder werden als Portaits (150×200 Pixel) zentriert eingebaut. Bilduntertitel sind ebenfalls mittig (zentriert) gesetzt. Die Bilder für dieses Beispiel wurden mit XnView auf die gewünschte Größe (150×200 Pixel) zugeschnitten. Alternativ können sonstige Programme dazu verwendet werden.

Hinweis:
Vorab muss das Plugin “TinyMCE Advanced” installiert werden, damit die Tabellenfunktion im TinyMCE-Editor zur Verfügung steht. Die notwendigen Einstellungen werden unter Einstellungen->TinyMCE Advanced vorgenommen.

Das Tabellensymbol anklicken, die Anzahl der Spalten/Zeilen angeben sowie die Breite der gesamten Tabelle auf 100% setzen:

Mit Klick auf “Einfügen” ist die erstellte Tabelle mit gepunkteten Linien zu sehen:

In die erste Zelle klicken und das Symbol zum Zentrieren auswählen:

Dann auf des Symbol zum Bild einfügen klicken und in der Mediathek das gewünschte Bild auswählen:

Den Bildlink durch Klick auf “Keine” deaktivieren,  die Option “Vollständige Größe” auswählen und das Bild einfügen:

Zunächst erscheint die Tabelle verschoben, da nur ein Bild eingefügt wurde. In gleicher Weise nun die restlichen Bilder einfügen:

Alle Bilder sind gleichmäßig auf der Seite verteilt:

Die Bildunterschriften werden auch zentriert eingefügt:

Nach Aktualisieren ist die neue Tabelle mit den Mitgliedern im Frontend zu sehen:


Weitere Optionen für Tabellenbreite, Zeilenhöhe usw. sind möglich. Nach Anklicken der Tabelle können weitere Zeilen/Spalten eingefügt bzw. gelöscht werden:

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>