ModX Tutorial

Changing the net, one site at a time…

Tabellen einfügen
video-icon
Die Schaltflächen:

 
schaltflaechen-tabelle  
tabelle-einfuegen-aendern
(1) fügt eine neue Tabelle ein / Spalten und Zeilen sowie Ausrichtung
eigenschaften-zeile (2) formatiert eine Zeile / Ausrichtung des Inhalts / Hintergrund

(3) formatiert eine einzelne Zelle / Ausrichtung / Hintergrund
neu-oben (4) fügt oberhalb der markierten Zelle eine neue hinzu
neu-unten  (5) fügt unterhalb der markierten Zeile eine neue hinzu
zeile-loeschen (6) löscht die Zeile, in der der Cursor steht
neu-links (7) fügt links eine neue Spalte hinzu
neu-rechts (8) fügt rechts eine neue Spalte hinzu
loeschen-spalte (9) löscht eine Spalte
verbinden-teilen (10) verbindet / teilt einzelne Spalten / Zellen
zellen-verbinden (11) fügt Zellen zusammen
hilfslinien-ausblenden (12) blendet nicht sichtbare Symbole / Tabellenränder/ Steuerzeichen aus

 Tabellen in ModX sind eigentlich recht einfach- wenn man einige prämissen beachtet!

Der Tabelle selbst muss eine feste Breite und eine feste Minimal-Höhe zugewiesen werden. Das erfolgt über die Schaltfläche (1).

Nun formatiert man die einzelnen Zeilen und legt hier die horizontale und vertikale Ausrichtung sowie die Zeilenhöhe fest (2).

Man han nun die Wahl, diese Formatierung auf eine einzelne Zeile auf gerade oder ungerade Zeilen oder auf die gesamte Tabelle zu übertragen.

Ein interessantes Feature ist hier der Zellenhintergrund. legt man hier eine Grafik oder einen Hex-Farbwert zu Grunde und wählt ungerade, so ist jede zweite Zeile farbig hinterlegt. Ein schönes Gimmick bei langen Tabellen.

Darüber hinaus kann man auch einzelne Zellen - abweichend von der vorher ausgewählten / festgelegten Grundformatierung - abändern. Das geschieht mit der Schaltfläche (3).

Insgesamt ist es wichtig, dass alle Zellen / Spalten und die Tabelle selbst feste Maße aufweist, sonst fließt sie - je nach eingegebenem Inhalt - amorph und verändert ihre Struktur!

Neue Tabelle einfügen
   
neue-tabelle

In den allgemeinen Einstellungen wwird zunächst festgelegt, wieviele Spalten und Zeilen die Tabelle hat.

Die Auswahl darunter stellt Padding und Margin der Zelle ein. Vorsicht. Diese beiden Werte addieren sich zur Höhe und Breite der Zelle hinzu!

Als nächstes wird die Ausrichtung der Tabelle festgelegt. Ist die Option "unbestimmt" aktiv, befindet sich die Tabelle rechts oben in der Ecke ihres Bezugsobjektes.

Darunter werden Höhe und Breite eingestellt.

   

erweitert

Der Reiter "erweitert" hat einige praktische Funktionen aufzuweisen.

Für uns wichtig ist hier die Option "Hintergrundbild". Aktiviert man diese, kann man der gesamten Tabelle ein Hintergrundbild zuweisen. Dieses sollte aber genauso groß sein wie die Tabelle selbst. Ist die Tabelle größer als das Hintergrundbild, wird dieses "getilet" also wiederholt (kann man mit einfachem html-Befehl unterbinden).

Interessant sind auch noch die Optionen Rahmenfarbe und Hintergrundfarbe. Hier einfach in das Kästchen hinter dem Kontrollfeld klicken und eine Farbe wählen!
Zeile formatieren
   
 zeile-formatieren Die Option Zeile formatieren übernimmt die zell-interne Formatierung. Hier ist die horizontale und vertikale  Ausrichtung der Inhalte in den einzelnen Zellen einzustellen. Auch die Breite der Zeile ist hier festlegbar.
Hierbei ist es clever, die Angaben zur horizontalen und vertikalen Azusrichtung  auf die gesamte Tabelle zu übertragen, was hinterher eine Menge an Formatierung und rumgeklicke erspart.
Unter dem Tab "erweitert" finden wir dieselben Optionen wie oben bereits beschrieben.
Zelle formatieren
   
zelle-formatieren  Als letztes ist es noch möglich einzelene Zellen abweichen von der vorher vorgenommenen Formatierung zu formatieren.

Auch hier kann die Formatierung auf weitere Bereiche der Zelle angewendet werden - allerdings verliert man dabei die vorher festgelegten Parameter wie die horizontale und vertikale Ausrichtung.

Deshalb sollte man sparsam mit dieser nachträglichen und individuellen Formatierungsoption umgehen.
   
 Tipp für Faule ...

 

 html-schaftflaeche

html

Wem das alles zu kompliziert ist, der erstellt sich einfach eine Tabelle in Dreamweaver oder sonst einem WYSIWYG-Programm oder coded diese von Hand. Dann nur noch den Quelltext mit der TAbelle komplett kopieren und mit Hilfe der Schaltfläche "html" in die Seite einsetzen!"

Voila - eine Tabelle. Und das Schöne ist, man kann sie mit Hilfe der Schaltflächen 4- 11 auch noch anpassen - alle Formatierungen bleiben erhalten - bwz. werden in die neuen Zelle übertragen.