Tabellen

Eine neue Tabellen legst Du mit Hilfe des Knopfs „Tabelle“ an. Nach dem Klick auf den Pfeil rechts neben dem Tabellensymbol öffnet sich ein Menü, dort wählst Du den ersten Punkt „Tabelle einfügen„. Daraufhin öffnet sich rechts von diesem Menüpunkt eine 10×10 Matrix, mit deren Hilfe Du die gewünschte Spalten- und Zeilenzahl einstellen kannst.Wenn möglich solltest Du so viele Spalten einstellen wie Du später brauchst, das erleichtert den Umgang mit der Tabelle deutlich (wenn notwendig, kannst Du aber auch jederzeit später noch Spalten einfügen bzw. rechts anfügen). Die Zahl der Zeilen kann anfangs ruhig klein sein, da Du jederzeit weitere Zeilen anfügen kannst, allerdings solltest Du mindestens eine Zeile mehr anlegen als es Kopfzeilen in der Tabelle geben soll.

Nach dem Einfügen siehst Du im Editor einige gestrichelte Linien und ein paar hohle Quadrate und der Cursor steht im Allgemeinen in der letzten Zelle der Tabelle (also rechts unten). Über der leer angelegten Tabelle wird eine Leiste mit insgesamt 8 Tabellen-spezifischen Knöpfen angezeigt, beim Überfahren der Knöpfe mit der Maus wird angezeigt, welchen Zweck die einzelnen Knöpfe haben (von links nach rechts: Tabelleneigenschaften, Tabelle löschen, neue Zeile davor einfügen, neue Zeile danach einfügen, Zeile löschen, neue Spalte davor einfügen, neue Spalte danach einfügen, Spalte löschen).

Diese Leiste mit den 8 Tabellen-spezifischen Knöpfen wird immer dann angezeigt, wenn sich der Cursor in einer Tabelle befindet. Abhängig von der Position der Tabelle im Textfenster des Editors kann diese Leiste über oder unter der Tabelle stehen, es wird jeweils versucht, die Leiste im Textfenster anzuzeigen.

Als erstes weist Du der neuen Tabelle das für unsere Website übliche Aussehen zu, das geht über den Knopf „Formate“ – dort wählst Du den Eintrag „table.ja-typo-table.table-rounded“ aus. Danach sieht die neue Tabelle schon ein bisschen gefälliger aus, und vor allem sind die Zellen jetzt etwas größer, so dass Du den Cursor einfacher in die einzelnen Zellen positionieren kannst.

Wenn Du willst, dann kannst Du jetzt noch die Tabellen-Eigenschaften prüfen bzw. ändern. Dazu klickst Du auf den ersten der 8 Tabellen-spezifischen Knöpfe (dafür ist Voraussetzung, dass der Cursor weiterhin in einer Zelle der Tabelle steht).

Die einzige Einstellung, die bei uns Sinn macht, ist die Breite der Tabelle. Hier kannst Du z.B. „100%“ eintragen, dann wird die Tabelle immer so breit dargestellt wie Platz vorhanden ist, und zwar unabhängig davon, wie viel Platz der Inhalt der Tabelle benötigt. Wenn Du keine Breite einstellst, dann wird die Tabelle so breit dargestellt wie es vom Inhalt her notwendig ist – das ist im Allgemeinen die bessere Wahl.

Alle anderen Einstellungen, die auf den Tabs „Allgemein“ und „Erweitert“ möglich sind, sind für uns nicht relevant, da sie von unserem Template sowieso nicht (oder nicht wie gewünscht) umgesetzt werden (also am besten alle anderen Felder leer lassen).

Als nächstes solltest Du die Felder der Kopfzeile(n) der Tabelle füllen, dazu gehst Du wie folgt vor:

Positioniere den Cursor mit der Maus in die erste Zelle der Tabelle (erste Zeile, erste Spalte).
Schreibe in diese erste Zelle den vorgesehen Inhalt, z.B. die erste Spalten-Überschrift.
Mit „Cursor rechts“ oder „Tab“ kommst Du dann in die zweite Zelle der ersten Zeile, schreibe in diese Zelle ebenfalls den vorgesehenen Inhalt.
Arbeite auf diese Art und Weise alle Zellen der ersten Zeile ab, so dass am Schluss jede Zelle dieser Zeile einen Inhalt hat.
Wenn Deine Tabelle mehr als eine Kopfzeile hat, dann arbeite die weiteren Kopfzeilen nach dem gleichen Schema ab.

Wenn Deine Tabelle mehr als eine Kopfzeile hat, dann wirst Du voraussichtlich an einigen Stellen eine Überschrift über mehrere Spalten setzen wollen. Dazu gehst Du wie folgt vor: Du markierst die Zellen, in die Du eine gemeinsame Überschrift eintragen willst, mit der Maus, dabei werden sie blau hinterlegt. Danach öffnest Du über die rechte Maustaste das Kontextmenü, wählst den Punkt „Zelle“ aus und dann im rechts daneben angezeigten Untermenü den Punkt „Zellen verbinden“ (alternativ kannst Du diese Funktion auch über den Knopf „Tabelle“ erreichen).

Die Tabelle sieht dann beispielsweise so aus (ich habe 4 Spalten und 2 Zeilen eingestellt, da die Tabelle einen einzeiligen Tabellenkopf bekommen soll):

Kopf 1	Kopf 2	Kopf 3	Kopf 4

Wenn Du eine Tabelle neu anlegst, dann besteht sie anfangs immer nur aus Zellen mit Inhalten, es werden keine Kopfzeilen und entsprechend auch keine Kopfzellen angelegt.

Nehmen wir ausgehend vom obigen Beispiel davon aus, dass die Tabelle eine Kopfzeile hat (für Tabellen, die nur Inhaltszellen haben, kannst Du diesen Abschnitt überspringen). Um diese Kopfzeile entsprechend auszuzeichnen, so dass sie anders als die Inhaltszellen dargestellt werden, gehst Du wie folgt vor:

Positioniere den Cursor in die erste Zelle (die hat im obigen Beispiel den Inhalt „Kopf 1“).
Dann öffnest Du mit der rechten Maustaste das Kontextmenü und wählst „Zeile“ und dann „Zeileneigenschaften“ aus.
Es öffnet sich ein Pop-Up Fenster, in dem Du Einstellungen für diese Zeile vornehmen kannst.
Sinnvoll ist hier nur die Änderung des Zeilentyps, dort ist „Inhalt“ voreingestellt, das änderst Du in „Kopfzeile„, ansonsten nimmst Du in diesem Fenster keine Änderungen vor.
Danach drückst Du den Knopf „OK„.
Als nächstes markierst Du alle Zellen in der ersten Zeile (also alle Kopfzellen) mit der Maus.
Dann öffnest Du erneut mit der rechten Maustaste das Kontextmenü und wählst „Zelle“ und dann „Zelleneigenschaften“ aus.
Es öffnet sich ein Pop-Up Fenster, in dem Du die Einstellungen für die markierten Zellen vornehmen kannst.
Sinnvoll ist hier nur die Änderung des Zellentyps, dort ist „keine“ oder „Zelle“ voreingestellt, das änderst Du in „Kopfzelle„, ansonsten nimmst Du in diesem Fenster keine Änderungen vor.
Danach drückst Du den Knopf „OK„.

Die Tabelle aus dem anfänglichen Beispiel sieht dann so aus:

Kopf 1	Kopf 2	Kopf 3	Kopf 4

Die Darstellung der ersten Zeile hat sich geändert, von der Auswirkung der Angabe „table-rounded“ ist jedoch noch nichts zu sehen. Wenn Du Dir die Tabelle ganz genau anschaust, dann wird Dir vielleicht auffallen, dass bei der ersten Zelle in jeder Zeile links der Rahmen fehlt. Auch in der ersten Zeile fehlt der obere Rahmen, das ist jedoch kaum zu erkennen.

Damit die noch fehlenden Rahmenteile gezeichnet werden und damit die Angabe „table-rounded“ eine Wirkung hat, müssen wir noch ein paar weitere Einstellungen an der Tabelle vornehmen. Die notwendigen Einstellungen erläutere ich nachfolgend anhand des obigen Beispiels:

Positioniere den Cursor in die erste Zelle der ersten Zeile (diese Zelle hat im obigen Beispiel den Inhalt „Kopf 1“).
Wähle über den Knopf „Formate“ den Eintrag „tr.first“ aus.
Wähle anschließend über den Knopf „Formate“ den Eintrag „th.first“ aus.
Positioniere den Cursor in die letzte Zelle der ersten Zeile (diese Zelle hat im obigen Beispiel den Inhalt „Kopf 4“).
Wähle über den Knopf „Formate“ den Eintrag „th.last“ aus.
Markiere nun mit der Maus in allen Zeilen mit Ausnahme der Kopfzeile(n) die erste Zelle.
Wähle anschließend über den Knopf „Formate“ den Eintrag „td.first“ aus.
Markiere nun mit der Maus in allen Zeilen mit Ausnahme der Kopfzeile(n) die letzte Zelle.
Wähle anschließend über den Knopf „Formate“ den Eintrag „td.last“ aus.

Die Tabelle aus dem anfänglichen Beispiel sieht dann so aus:

Kopf 1	Kopf 2	Kopf 3	Kopf 4

Die Tabelle hat jetzt eine senkrechte Begrenzung auf der linken Seite und es ist erstmalig eine Wirkung der Angabe „table-rounded“ zu erkennen: die Ecken links und rechts oben werden jeweils rund dargestellt – zumindest wenn man einen aktuellen Browser hat: im Internet Explorer 7 z.B. werden die Ecken weiterhin eckig dargestellt. Die Ecken links und recht unten werden noch nicht rund dargestellt – das kommt später.

Ohne der Angabe „table-rounded“ würde unser Beispiel jetzt übrigens wie folgt aussehen:

Kopf 1	Kopf 2	Kopf 3	Kopf 4

Als nächstes füllen wir die Tabelle mit Inhalt, dabei wird sich sowohl der Fall ergeben, dass wir weitere Zeilen am Tabellenende benötigen, als auch der Fall, dass wir eine zusätzliche Spalte in der Tabelle brauchen.

Die Felder der ersten Inhaltszeile sind schnell gefüllt:

Kopf 1	Kopf 2	Kopf 3	Kopf 4
Inhalt 1	langer Inhalt 2	I3	und noch ein sehr langer Inhalt in der 4. Spalte, der irgendwann zum Umbruch in der Tabellenzelle führen wird

Momentan schaut die Tabelle ziemlich zerrupft aus (liegt bewusst daran, dass die letzte Zelle in der 2. Zeile einen überlangen Inhalt hat).

Als erstes sorgen wir dafür, dass die Überschriften nicht umgebrochen werden. Dazu positionieren wir der Reihe nach in die Zellen der Überschriftszeile, markieren das dort zwischen „Kopf“ und der danach stehenden Zahl stehende Leerzeichen und ersetzen es durch ein geschütztes Leerzeichen (Knopf „geschütztes Leerzeichen einfügen„).

Kopf 1	Kopf 2	Kopf 3	Kopf 4
Inhalt 1	langer Inhalt 2	I3	und noch ein sehr langer Inhalt in der 4. Spalte, der irgendwann zum Umbruch in der Tabellenzelle führen wird

Das Ergebnis schaut viel besser aus, insbesondere wird der Inhalt der Textzellen automatisch oben ausgerichtet, ohne dass ich dafür etwas eingestellt habe.

Nun brauche ich noch ein paar zusätzliche Zeilen in der Tabelle. Dazu positioniere ich den Cursor in die letzte Zeile der Tabelle und drücke mehrfach den Knopf „Zeile unterhalb einfügen“ (alternativ hätte ich auch so oft die „Tab“ Taste drücken können, bis die gewünschte Anzahl neue Zeilen am Ende der Tabelle angefügt worden sind). Und so sieht das Ergebnis aus:

Kopf 1	Kopf 2	Kopf 3	Kopf 4
Inhalt 1	langer Inhalt 2	I3	und noch ein sehr langer Inhalt in der 4. Spalte, der irgendwann zum Umbruch in der Tabellenzelle führen wird

Am Vorhandensein der senkrechten Begrenzung am linken Rand der Tabelle ist zu erkennen, dass die Attribute der Zeile, in der ich den Knopf „Zeile unterhalb einfügen“ gedrückt habe, automatisch auf die eingefügte Zeile übernommen worden sind (das gilt für Einstellungen der Tabellenzeile sowie für Einstellungen der Zellen in der Tabellenzeile).

Mit dem Knopf „Zeile oberhalb einfügen“ hätte ich übrigens auch Zeilen vor der Tabellenzeile einfügen können, in die ich den Cursor positioniert hatte.

Füllen wir die weiteren Zeilen mit (beliebigem) Text:

Kopf 1	Kopf 2	Kopf 3	Kopf 4
Inhalt 1	langer Inhalt 2	I3	und noch ein sehr langer Inhalt in der 4. Spalte, der irgendwann zum Umbruch in der Tabellenzelle führen wird
noch’n Inhalt	Lorem	ipsum	dolor
sit	amet,	consectetaur	adipisicing
elit,	sed	do	eiusmod

So weit so gut, jetzt stellen wir fest, dass wir zwischen „Kopf 3“ und „Kopf 4“ noch eine Spalte brauchen. Dazu positioniere ich den Cursor in das Feld mit dem Inhalt „Kopf 3“, öffne mit der rechten Maustaste das Kontextmenü und wähle dort „Spalte“ und dann „Neue Spalte davor einfügen“ aus (genauso gut hätte ich in das Feld mit dem Inhalt „Kopf 2“ positionieren können und stattdessen „Neue Spalte danach einfügen“ auswählen können). In die neue Zelle im Tabellenkopf trage ich noch „Kopf 5“ (mit einem geschützten Leerzeichen zwischen „Kopf“ und „5“) ein.

Die Tabelle hat jetzt alle Zeilen, die ich brauche, deshalb kann jetzt noch die letzte Zeile der Tabelle entsprechend eingerichtet werden:

Positioniere den Cursor in die erste Zelle der letzten Zeile.
Wähle über den Knopf „Formate“ den Eintrag „tr.last“ aus.

Und so sieht das dann aus:

Kopf 1	Kopf 2	Kopf 3	Kopf 4
Inhalt 1	langer Inhalt 2	I3	und noch ein sehr langer Inhalt in der 4. Spalte, der irgendwann zum Umbruch in der Tabellenzelle führen wird
noch’n Inhalt	Lorem	ipsum	dolor
sit	amet,	consectetaur	adipisicing
elit,	sed	do	eiusmod

Jetzt sind auch die Tabellen-Ecken links und rechts unten rund.

Du kannst auch eine Spalte vor der ersten Spalte einfügen oder hinter der letzten Spalte anfügen. Beachte dabei aber bitte, dass die zuvor ersten bzw. letzten Spalten immer noch mit den Formaten „th.first“ und „td.first“ bzw. „th.last“ und „td.last“ versehen sind. Diese Format musst Du noch entfernen, das geht ebenfalls über den Knopf „Formate„. Die für eine Zelle gesetzten Formate sind links mit einer grauen Markierung versehen, wenn Du eines der Formate auswählst, wird es von der Zelle entfernt (das funktioniert auch für mehrere markierte Zellen, wenn sie mit dem gleichen Format versehen sind). Für die neuen ersten bzw. letzten Spalten musst Du im Allgemeinen die Formate nicht mehr setzen, sie werden durch das Einfügen der Spalten im Normalfall automatisch zugewiesen (ein Kontrolle schadet aber nicht).

Als nächstes wollen wir Zellen miteinander verbinden, das ist sowohl horizonal als auch vertikal möglich. Horizonal will ich die Felder mit den Inhalten „Lorem“, leer und „ipsum“ verbinden, dazu markiere ich die genannten 3 Felder (sie werden dabei blau hinterlegt) und wähle dann im Kontextmenü zuerst „Zelle“ und dann „Zellen verbinden„. Der Inhalt aller 3 Zellen wird in einer Zelle, die sich über die 3 Spalten erstreckt, zusammen gefasst (dass dabei „Lorem“ und „ipsum“ durch ein Leerzeichen getrennt sind, liegt daran, dass die vermeintlich leere Zelle ein Leerzeichen enthielt – wenn ich die Zellen mit den Inhalten „sit“ und „amet,“ miteinander verbunden hätte, dann wäre dabei „sitamet,“ heraus gekommen). Und vertikal will ich die Felder mit den Inhalten „dolor“, „adipisicing“ und „eiusmod“ verbinden, dazu markiere ich ebenso die 3 Felder und wähle dann im Kontextmenü zuerst „Zelle“ und dann „Zellen verbinden„. Die 3 Worte werden zu einem zusammen gezogen:

Kopf 1	Kopf 2	Kopf 3	Kopf 4
Inhalt 1	langer Inhalt 2	I3	und noch ein sehr langer Inhalt in der 4. Spalte, der irgendwann zum Umbruch in der Tabellenzelle führen wird
noch’n Inhalt	Lorem ipsum		doloradipisicingeiusmod
sit	amet,	consectetaur
elit,	sed	do

Du kannst mehrere Zellen auch verbinden, inden Du den Cursor in die am weitesten links bzw. am weitesten oben stehende Zelle positionierst und dann im Kontextmenü zuerst „Zelle“ und dann „Zellen verbinden“ auswählst. Es öffnet sich dann ein Pop-Up Fenster, in dem Du eingeben kannst, wie viele Zellen horizontal und vertikal miteinander vereint werden sollen. Nach dem Klick auf „OK“ werden die Zellen miteinander vereint, die Inhalte werden entsprechend zusammen gezogen.

Ist es Dir aufgefallen? In der oben stehenden Tabelle ist die rechte untere Ecke nicht mehr rund. Der Grund ist schnell gefunden: wenn Du in die rechte untere Zelle positionierst (das ist die Zusammenfassung der 3 unteren Zellen unter dem „Kopf 4“), dann siehst Du nach dem Klicken auf den Knopf „Formate„, dass das Format „tr.last“ nicht mehr mit einer grauen Markierung versehen ist. Das ist jedoch schnell repariert: einfach den Eintrag „tr.last“ auswählen.

Nachträglich stelle ich fest, dass das horizonale Verbinden der Zellen mit „Lorem“, leer und „ipsum“ ein Fehler war. Ich positioniere den Cursor in die Zelle mit dem Inhalt „Lorem ipsum“ und wähle dann im Kontextmenü zuerst „Zelle“ und dann „Zelle aufteilen„. Das Ergebnis:

Kopf 1	Kopf 2	Kopf 3	Kopf 4
Inhalt 1	langer Inhalt 2	I3	und noch ein sehr langer Inhalt in der 4. Spalte, der irgendwann zum Umbruch in der Tabellenzelle führen wird
noch’n Inhalt	Lorem ipsum		doloradipisicingeiusmod
sit	amet,	consectetaur
elit,	sed	do

Der Text der vereinten Zelle ist komplett in der ersten Zelle nach dem Trennen geblieben (wie hätte der Editor den Text auch anders verteilen sollen?), die beiden anderen Zellen sind leer (Achtung: „leer“ heißt bei Tabellenzellen meist, dass sie ein Leerzeichen enthalten!).

Hast Du es gesehen? So ganz hat das mit den runden Ecken nicht funktioniert. Die rechte untere Ecke ist jetzt zwar rund, dafür haben wir in der 3. Zeile von unten auf der linken Seite eine linke untere runde Ecke – und das mitten in der Tabelle. Ist irgendwie klar: da ist für die Tabellenzeile „tr.last“ und für die Zelle „td.first“ gesetzt, also wird eine linke untere Ecke angezeigt. Das ist also auch keine Lösung, am besten also auf die runde rechte untere Ecke verzichten (oder dort keine Zellen vereinen).

Ich hoffe, Du hast an diesen Beispielen gesehen, wie Du im Editor TinyMCE mit Tabellen arbeiten kannst, was möglich ist und was nicht – und wo Du ggf. auf Probleme stoßen könntest.

Du kannst natürlich auch Tabellen ohne jegliche Rahmen und sonstiges Design (Hintergrund, Schriftgestaltung usw.) nutzen, etwa dann, wenn Du einen Text mehrspaltig anordnen willst (etwa links ein Ehrenamt oder eine Funktion im Sportbereich und rechts die Personen, die dieses Ehrenamt bzw. diese Funktion innehaben). In diesem Fall benötigst Du das ganze Wissen um die Formate „table.ja-typo-table.table-rounded„, „tr.first„, „tr.last„, „th.first„, „th.last„, „td.first“ und „td.last“ nicht, aber Du wirst dennoch die besprochenen Knöpfe nutzen. Außerdem wirst Du Dich ggf. um die vertikale Ausrichtung der Inhalte in Tabellen-Zellen kümmern müssen.