Tabellen im RTE erstellen
Im Rich Text Editor haben Sie auch die Möglichkeit, Tabellen zu erstellen.
Tabellen ausschließlich für die systematische Darstellung von Inhalten verwenden
Tabellen werden verwendet um Daten übersichtlich in einem Gitter aus Zeilen und Spalten angeordnet darzustellen. Tabellen sind semantische Strukturen und sollen ausschließlich für tabellarische Inhalte genutzt werden. Benutzen Sie Tabellen niemals um Texte nebeneinander zu positionieren. Dafür bietet das Content Management System (CMS) das Element "Mehrspaltiger Content". Lesen Sie auch die Hintergrundinformationen wieso Struktur und Semantik im Web wichtig sind.
Tabelle vs. Liste
Oft werden sehr kleine Tabellen angelegt, obwohl der Inhalt besser als Liste ausgezeichnet wäre.
In den meisten Fällen lässt sich mit einer einfachen gedanklichen Übung prüfen, ob Inhalte tabellarische Form benötigen. Fragen Sie sich, wie Sie die Inhalte bei einem Gespräch auf einem Blatt Papier notieren würden.
Nutzen Sie Inhaltstypen (Tabellen, Überschriften, Listen ...) immer entsprechend ihrer Semantik.
Richtig aufgebaut bieten Tabellen eine Reihe von Funktionen, um z.B. via Screenreader navigiert und vorgelesen zu werden.
Neue Tabellen im RTE anlegen
Klicken Sie in der Werkzeugleiste des Rich Text Editors auf das Symbol Table. Es öffnet sich ein Fenster, in dem sie die Anzahl der Zeilen und Spalten in der Tabelle auswählen können (Bild 1). Die Tabelle erscheint sofort innerhalb des RTEs. Die Anzahl der Spalten und Zeilen lässt sich auch im Nachhinein ändern.
Kontextmenü-Optionen
Nachdem Sie die Tabelle erstellt haben, können Sie mit einem Rechtsklick mit der Maus das Kontextmenü öffnen (Bild 2). Alternativ können Sie die Tasten Umschalttaste + F10 drücken, um das Kontextmenü zu öffnen.
Kontextmenü-Optionen:
- Tabellengröße nachträglich ändern: zusätzliche Zeilen/Spalten einfügen oder bestehende wieder löschen (Insert new row/column before/after...)
- die Eigenschaften der markierten Zelle(n) direkt verändern (z.B. split cells, merge cells...)
- Text aus der Zwischenablage einfügen (Paste)
- die gesamte Tabelle löschen (Delete table)
- die erweiterten Tabelleneigenschaften öffnen (Table Properties) (Bild 3)
Sie können diese Einstellungen auch zu einem späteren Zeitpunkt vornehmen oder ändern.
Erweiterten Tabelleneigenschaften
Mit "table properties" können Sie ein eigenes Dialogfenster öffnen, um weitere Tabelleneigenschaften einzustellen (Bild 3).
- Rows/Columns: Diese Einstellung müssen Sie hier nicht ändern, da Sie das bereits in der vorherigen Ansicht (Bild 2) einstellen können.
- Caption: Jede Tabelle sollte eine Tabellenüberschrift haben.
- Headers: Festlegen, wo sich der Tabellenkopf befindet.
- Summary: Eine Tabellenzusammenfassung erscheint nicht im Frontend, sondern wird von Hilfstechnologien (z.B. Screenreader) benutzt.
Tabellenüberschrift (Caption) ergänzen
Öffnen Sie dafür die Erweiterten Tabelleneigenschaften (Bild 3).
Tragen Sie unter Caption eine Tabellenüberschrift ein. Diese Überschrift ist mit der Tabelle verknüpft und kann auch beim Verschieben der Tabellen innerhalb des CMS nicht verloren gehen.
Wir empfehlen immer eine Tabellenüberschrift einzutragen. Die Tabellenüberschrift hilft Nutzern eine bestimmte Tabelle zu einem Thema zu identifizieren/finden und den Inhalt zu verstehen. Für blinde Nutzer, die einen Screenreader verwenden, ist die Tabellenüberschrift eine hilfreiche Information. Spätestens wenn sich mehrere Tabellen auf einer Seite befinden, sollte jede Tabelle eine Tabellenüberschrift haben.
Tabellenkopf „table headers“ festlegen
Jede Tabelle sollte einen Tabellenkopf aufweisen.
Öffnen Sie dazu die Erweiterten Tabelleneigenschaften (Bild 3).
Wählen Sie anschließend eine der Optionen unter Headers aus.
Tabellenzusammenfassung (Summary) eintragen
Die Tabellenzusammenfassung bietet zusätzliche Informationen zum Inhalt bzw. zur Nutzung der Tabelle. Diese Informationen werden im Frontend nicht angezeigt, sie werden z.B. Screenreader-Nutzern zusätzlich vorgelesen. Verwenden Sie diese Option nur, wenn die Tabelle einen unüblichen Aufbau hat und nicht selbsterklärend ist. In den meisten Fällen kann die Option freigelassen werden.
Tabellen-Layout ändern
Das Layout Ihrer Tabelle können Sie über das Drop-down-Menü "Formating Styles" beeinflussen. Wenn Sie Ihre Tabelle ausgewählt haben stehen Ihnen mehrere Styles zur Verfügung:
- Basic (no style)
- Gitternetz
- Horizontal lines
Diese Formate stehen Ihnen jeweils mit und ohne die Option "responsive" zur Verfügung. Wir empfehlen Ihnen Ihre Tabellen immer mit "responsive" Design zu erstellen, damit sie auch auf kleinen Bildschirmen (Smartphones) korrekt dargestellt werden können.
Beispieltabelle ohne Linien
Hier sehen Sie ein Beispiel, wie eine Tabelle ohne Gitternetz aussehen kann („Basic (no style) responisve“).
| Name | Durchwahl | |
|---|---|---|
| Mustermann, Max | -30589 | max.mustermann@tum.de |
| Weiß, Henriette | -50648 | henriette.weiß@tum.de |
| Bauer, Horst | -89534 | horst.bauer@tum.de |
Beispieltabelle mit Gitternetz
Hier sehen Sie ein Beispiel, wie eine Tabelle mit Gitternetz aussehen kann („Gitternetz responsive“).
| Name | Durchwahl | |
|---|---|---|
| Mustermann, Max | -30589 | max.mustermann@tum.de |
| Weiß, Henriette | -50648 | henriette.weiß@tum.de |
| Bauer, Horst | -89534 | horst.bauer@tum.de |
Beispieltabelle mit h-lines
Hier sehen Sie ein Beispiel, wie eine Tabelle mit h-lines aussehen kann („horizontal lines responsive“).
| Name | Durchwahl | |
|---|---|---|
| Mustermann, Max | -30589 | max.mustermann@tum.de |
| Weiß, Henriette | -50648 | henriette.weiß@tum.de |
| Bauer, Horst | -89534 | horst.bauer@tum.de |
Spaltenbreite festlegen
Standardmäßig sind in RTE-Tabellen keine Spaltenbreiten definiert, sondern sie werden anhand des Tabelleninhalts durch den Browser festgelegt. Dabei wird immer der ganze zur Verfügung stehende Platz verwendet.
Das hat den Vorteil, dass sich Ihre Tabelle immer ideal an die Größe des verwendeten Bildschims anpassen kann und auch auf mobilen Geräten vollständig dargestellt werden kann. Wir empfehlen Ihnen daher weitestgehend auf das Definieren fester Spaltenbreiten zu verzichten.
Prüfen Sie auch, ob eine Tabelle an der Stelle wirklich nötig ist und ob Sie Alternativen, wie TUM Memberlist verwenden können.
Wenn Sie dennoch eine bestimmte Spaltenbreite definieren möchten, gibt es verschiedene Möglichkeiten dies zu erreichen:
Mehrere Inhalte in einer RTE-Tabelle
Manchmal hat man mehrere gleichartige Tabellen auf einer Seite, die durch eine Überschrift und vielleicht einen Textblock getrennt sind. Damit diese Tabellen alle einheitlich aussehen empfiehlt es sich die Inhalte innerhalb einer einzelnen RTE-Tabelle zu formatieren.
Zellen zusammenfassen
Der „Trick“ besteht darin, nur eine Tabelle zu erstellen. Dadurch ist gewährleistet, dass die Spalten die gleiche Breite haben. Für die Abschnitte zwischen den Teil-Tabellen werden alle Zellen der Zeile zu einer einzigen Zelle zusammengefügt. Dazu markieren Sie alle Zellen einer Zeile und verbinden sie mit "Merge Cells" (Bild 4)
In der neu enstandenen einzelnen Zelle können Sie Ihren "Zwischentext" schreiben, wie im RTE außerhalb der Tabelle.
Gleiche Spaltenbreite
Wenn es nicht möglich ist auf einer Seite mehrere gleichartige Tabellen innerhalb einer Tabelle zu formatieren, würde es passieren, dass für jede Tabelle eigene Spaltenbreiten anhand des jeweiligen Inhalts festgelegt werden. Das kann zu einem sehr uneinheitlichen Bild auf der Seite führen.
In so einem Fall bietet es sich an die Design-Option "equal width" zu verwenden, die jeder Spalte einer Tabelle unabhängig vom Inhalt den gleichen Prozentsatz der Gesamtbreite zuordnet. Bei einer Tabelle mit vier Spalten hätte beispielsweise jede Spalte 25% der Gesamtbreite.
Die Style-Option "equal width" können Sie wie im Punkt "Tabellen-Layout ändern" beschrieben für alle drei Layout-Vorlagen festlegen.
Pixelwerte für einzelne Spalten festlegen
Bitte beachten Sie, daß sich die Größe der Tabelle immer an dem gesamten Inhaltsbereich ausrichtet. Dabei ist eine Spalte immer so breit wie ihr längstes Wort. Sie können jedoch die Breite von einzelnen Spalten festlegen.
Zelleneigenschaften definieren
Öffnen Sie hierfür mit einem Rechtsklick mit der Maus in der ersten oberen Zelle Ihrer Tabelle das Kontextmenü. Dort finden Sie die Zelleneigenschaften (Bild 5).
Nun öffnet sich ein neues Fenster, in dem Sie die Breite der Zelle festlegen können (Bild 6). Mit einer Zahl, z.B. 150, erreichen Sie, dass die Spalte so viel Pixel breit dargestellt wird, wie angegeben.
Die weiteren Spalten teilen sich dann den Rest der zur Verfügung stehenden Gesamtbreite untereinander auf. Standardmäßig hat die Hauptspalte im dreispaltigen Layout eine Breite von 720 Pixel.
Die Nadel im Heuhaufen suchen
Die Definition einer Spaltenbreite ist eine Zelleneigenschaft und nicht einer ganzen Spalte. Die weiteren Zellen einer Spalte richten sich nur danach.
Nehmen Sie daher in jedem Fall die oberste Zeile ihrer Tabelle um eine Breite zu definieren. Nur so kann sichergestellt werden, dass jeder Redakteur, der mit der Tabelle arbeitet, diese Angabe auch sicher und schnell wiederfindet.