Hilfe:Tabellen/Beispiele
Auf dieser Hilfeseite werden Beispiele für Tabellen mit der zugehörigen Syntax dargestellt, damit die Wirkung einer Formatierung über Klassen- oder Stylezuweisungen nachvollziehbar ist. Dafür wird den Beispielen der erzeugende Quelltext nachgestellt.
Grundlagen[Bearbeiten | Quelltext bearbeiten]
Um eine Tabelle zu erstellen können, je nachdem welches Bearbeitungswerkzeug verwendet wird, Hilfsmittel genutzt werden, die eine Grundstruktur erstellen.
Visuelle Bearbeitung- Im Menüpunkt Einfügen
kann über den Unterpunkt 
Tabelle
Siehe Hilfe:Tabellen/VisualEditor#Einfache Tabellen 
Quelltextbearbeitung- Vector-Skin: Ein identisches Symbol
befindet sich in den erweiterten Optionen der Bearbeitungswerkzeugleiste. In dem Dialogfeld kann aus unterschiedlichen Optionen ausgewählt werden wie die Grundstruktur der neuen Tabelle aussehen soll. Die Zellen enthalten nach dem Einfügen Beispieltexte.
Für Mobilgeräte ist keine derartige Erstellungshilfe vorhanden.
Einfache Tabellen[Bearbeiten | Quelltext bearbeiten]
Ohne jegliche Zuweisung (Klassen, Styles oder Tabellenattribute) ist eine Tabelle zunächst transparent, lediglich die Formatierung unter- oder nebeneinander liegender Inhalte wird umgesetzt (Hilfe:Tabellen #einfach).
Zellenränder[Bearbeiten | Quelltext bearbeiten]
Um die Tabelle auf einfache Art mit einem Rahmen und unterteilten Zellen zu strukturieren bietet sich insbesondere die Verwendung des Klasse wikitable an.
Es gibt weitere Möglichkeiten einer Tabelle oder einzelnen Zeilen einen Rand (Rahmen) zuzuweisen.
Ränder durch wikitable[Bearbeiten | Quelltext bearbeiten]
Zeilen
| Zelle 1 |
| Zelle 2 |
| Zelle 3 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
| Zelle 1
|-
| Zelle 2
|-
| Zelle 3
|}
Spalten
| Zelle 1 | Zelle 2 | Zelle 3 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
Spalten alternativ
{| class="wikitable"
|-
| Zelle 1 || Zelle 2 || Zelle 3
|}
Zeilen und Spalten
| Zelle 1/1 | Zelle 2/1 |
| Zelle 1/2 | Zelle 2/2 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
| Zelle 1/1
| Zelle 2/1
|-
| Zelle 1/2
| Zelle 2/2
|}
Spalten und Zeilen alternativ
{| class="wikitable"
|-
| Zelle 1/1 || Zelle 2/1
|-
| Zelle 1/2 || Zelle 2/2
|}
Für manche Tabellenfunktion ist es erforderlich, dass oben eine Kopfzeile vorhanden ist, dies gilt insbesondere für die Sortierung.
Randeigenschaften ändern[Bearbeiten | Quelltext bearbeiten]
Es kann vorkommen, dass einzelne Zeilen mit einer durchgehenden, verstärkten oder farblich abgesetzten Trennlinie versehen werden sollen. Das kann über style="border:…;" verwirklicht werden. Dabei ist zu beachten, dass bei der Verwendung von class="wikitable" einem Rand mindestens eine Dicke von 2px zugewiesen werden muss.
style="border-style:…;"– Art der Randlinien siehe Rahmenarten
Border kann gemeinsam oder auf jeden Rand einzeln wirken. – Attribute: (Reihenfolge bei mehreren Werten: oben, rechts, unten, links)
style="border-color:…;"– kann bis zu vier Farbwerte haben, benötigt zusätzlich eine Angabe fürborder-width:…;style="border-width:…;"– kann bis zu vier Breitenwerte haben.
Ränder unterschiedlich färben
| Zelle 1 | Zelle 2 | Zelle 3 |
unterschiedlich dick
| Zelle 1 | Zelle 2 | Zelle 3 |
Werte getauscht
| Zelle 1 | Zelle 2 | Zelle 3 |
Quelltext dieser Tabelle:
{| class="wikitable" style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width:3px;"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
{| class="wikitable" style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width:2px 5px 2px 5px;;"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
für eine Zelle |style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width:3px;"| Zelle 2
| Zelle 1 | Zelle 2 | Zelle 3 |
Zeilenweise[Bearbeiten | Quelltext bearbeiten]
Um eine Zeile mit einer Linie oben oder unten darzustellen können die Eigenschaften über
style="border-top:…;"– Randeigenschaften obenstyle="border-bottom:…;"– Randeigenschaften unten
zugewiesen werden. Für Wikitables sollte der Wert auch hier mindestens 2px betragen, um den Effekt sichtbar zu machen.
|- style="border-bottom: 2px solid;"
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
|- style="border-top: 2px solid;"
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
|- style="border-bottom: 2px solid; border-top: 2px solid;"
Rand oben und unten in Zeile 2 verstärken
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
Quelltext dieser Tabelle:
{| class="wikitable"
|- style="border-bottom: 2px solid;"
| Zelle 1
| Zelle 2
| Zelle 3
|- style="border-bottom: 2px solid;"
| Zelle 1
| Zelle 2
| Zelle 3
|- style="border-bottom: 2px solid;"
| Zelle 1
| Zelle 2
| Zelle 3
|}
Diese Funktion kann auch dazu genutzt werden, um den Zeilenrand oben oder unten auszublenden.
|- style="border-bottom: hidden;"
Rand unten in Zeile 1 und 2 ausblenden
| Zelle 1 | Zelle 2 | Zelle 3 |
|- style="border-bottom: hidden; border-top: hidden;"
Rand oben und unten in Zeile 2 ausblenden
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
Quelltext dieser Tabelle:
{| class="wikitable"
|- style="border-bottom: hidden;"
| Zelle 1
| Zelle 2
| Zelle 3
|- style="border-bottom: hidden;"
| Zelle 1
| Zelle 2
| Zelle 3
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
Spaltenweise[Bearbeiten | Quelltext bearbeiten]
Um eine Spalte mit einer Linie links oder rechts darzustellen können die Eigenschaften über
style="border-left:…;"– Randeigenschaften linksstyle="border-right:…;"– Randeigenschaften rechts
zugewiesen werden. Für Wikitables sollte der Wert auch hier mindestens 2px betragen, um den Effekt sichtbar zu machen.
|style="border-right: 2px solid;"||style="border-left: 2px solid;"|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
|style="border-right: 2px solid; border-left: 2px solid;"|
in der mittleren Spalte
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
|style="border-right: 2px solid;"| Zelle 1
|style="border-right: 2px solid;"| Zelle 2
| Zelle 3
|-
| Zelle 1
|style="border-left: 2px solid;"| Zelle 2
|style="border-left: 2px solid;"| Zelle 3
|-
| Zelle 1
|style="border-right: 2px solid; border-left: 2px solid;"| Zelle 2
| Zelle 3
|}
Diese Funktion kann auch dazu genutzt werden, um einen Spaltenrand links oder rechts auszublenden.
|style="border-right: hidden;"||style="border-left: hidden;"|
| Zelle 3 |
| Zelle 1 |
| Zelle 3 |
|style="border-right: hidden; border-left: hidden;"|
in der mittleren Spalte
| Zelle 1 | Zelle 3 |
| Zelle 1 | Zelle 3 |
| Zelle 1 | Zelle 3 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
|style="border-right: hidden;"| Zelle 1
|style="border-right: hidden;"| Zelle 2
| Zelle 3
|-
| Zelle 1
|style="border-left: hidden;"| Zelle 2
|style="border-left: hidden;"| Zelle 3
|-
| Zelle 1
|style="border-right: hidden; border-left: hidden;"| Zelle 2
| Zelle 3
|}
Ecken abrunden[Bearbeiten | Quelltext bearbeiten]
Es ist technisch möglich den Rahmen einer Tabelle mit abgerundeten Ecken zu präsentieren. Dies ist allerdings für class="wikitable" nicht vorgesehen und sollte auch nicht in Artikeln eingesetzt werden.
style="border-radius:…;"– erfordert eine weitere Zuweisung border-style, width, coloroder eine Hintergrund- beziehungsweise eine Rahmenfarbe.style="border-top-right-radius: …; border-top-left-radius: …; border-bottom-right-radius: …; border-bottom-left-radius: …;"
{| class="hintergrundfarbe8" style="border: 2px solid #999999; border-radius: .5em;"
| Überschrift | Überschrift | Überschrift |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
{| class="hintergrundfarbe7 rahmenfarbe3" style="border-style: solid; border-width: 2px; border-radius: .3em;"
| Überschrift | Überschrift | Überschrift |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 1 | Zelle 2 | Zelle 3 |
Überschriften[Bearbeiten | Quelltext bearbeiten]
Eine komplette Tabelle kann mit einer Überschrift |+ versehen werden. Diese ist standardmäßig zentriert ausgerichtet.[1] Je nach verwendeter CSS-Klasse kann diese Überschrift auch fett formatiert sein.
Einfache Tabelle
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
mit class="wikitable"
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext dieser Tabelle:
{|
|+ Text der Überschrift
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
Formatierung der Überschrift ändern[Bearbeiten | Quelltext bearbeiten]
Manchmal kann es sinnvoll sein die Tabellenüberschrift anzupassen, beispielsweise ihr einen Zellenrand zuzuweisen, sie etwas höher zu setzen oder die Standardausrichtung (zentriert) des Textes zu verändern. (Hier durchgehend am Beispiel class="wikitable")
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext für die Zeile:
|+ style="text-align:left;"| …
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext für die Zeile:
|+ style="text-align:right;"| …
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext für die Zeile:
|+ style="margin-bottom:1em;"| …
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext für die Zeile:
|+ style="margin-bottom:1em; border-bottom:1px solid #999999;"| …
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext für die Zeile:
|+ style="border:1px solid #555555;"| …
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext für die Zeile:
|+ class="hintergrundfarbe4" style="border:1px solid #555555;"| …
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext für die Zeile:
|+ style="border:1px solid #555555; background:#ABCDEF;"| …
Position der Überschrift ändern[Bearbeiten | Quelltext bearbeiten]
Der zentralen Tabellenüberschrift kann durch das Style-Attribut style="caption-side:…;" eine abweichende Position zugewiesen werden.
- In Artikeln sollten Überschriften nicht neben Tabellen positioniert werden.
|+ style="caption-side:bottom;"| …
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 |
Quelltext dieser Tabelle:[1]
{| class="wikitable"
|+ style="caption-side:bottom;"| Überschrift unten setzen
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
|+ style="caption-side:right; margin-left:.5em;"| …
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
|+ style="caption-side:left; margin-right:.5em;"| …
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Quelltext der Tabelle: (Überschrift rechts)
{| class="wikitable"
|+ style="caption-side:right; margin-left:.5em;"| Überschrift rechts
|-
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|}
Kopfzellen[Bearbeiten | Quelltext bearbeiten]
Kopfzellen ! können, anders als der Name vermuten lässt, überall innerhalb einer Tabelle vorkommen. Sie können Kopfzeilen, Spalten-, Zwischenüberschriften und Fußzeilen bilden.
! !!
| Spaltenüberschrift | Spaltenüberschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Erdbewohner (Zwischenüberschrift) | |
| Max Mustermann | 3. Juli 1980 |
| Außerirdische (Zwischenüberschrift) | |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen | |
| Fußzeile | Fußzeile |
Quelltext dieser Tabelle:
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Spaltenüberschrift !! Spaltenüberschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
!colspan="2"| Erdbewohner (Zwischenüberschrift)
|-
| Max Mustermann || 3. Juli 1980
|-
!colspan="2"| Außerirdische (Zwischenüberschrift)
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|-
! Fußzeile !! Fußzeile
|}
Inhaltszellen[Bearbeiten | Quelltext bearbeiten]
Inhaltszellen | enthalten den eigentlichen Inhalt der einzelnen Tabellenzellen. Sie können mit Text, Bildern, Listen, Links, Zahlenwerten, Vorlagen … gefüllt werden.
| ||
| Datei | Liste | Verlinkung | Datum |
|---|---|---|---|
 |
|
Max Mustermann | 12. Februar 2000 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
! Datei !! Liste !! Verlinkung !! Datum
|-
| [[Datei:2015-09-18, National Dinosaur Museum - 10.jpg|mini|zentriert|120px|Ein Dinosaurier]]
|
* Buchreihe 1
** Trilogie Teil 1
** Trilogie Teil 2
** Trilogie Teil 3
* Buchreihe 2
| [[Mustermann|Max Mustermann]]
| 12. Februar 2000
|}
Zellenzuordnung mit scope[Bearbeiten | Quelltext bearbeiten]
Das Attribut scope dient dazu einer Zeile scope="row" oder Spalte scope="col" eine bestimmte Überschrift zuzuweisen. So kann auch eine normale Inhaltszelle | als Überschrift einer Zeile deklariert werden. Alle rechts folgenden Zellen dieser Zeile werden dadurch zu dieser in direkten Bezug gesetzt. Das Attribut scope bietet weitere Möglichkeiten der Zuordnung scope="colgroup" (mehrere Spalten) und scope="rowgroup" (mehrere Zeilen) zuordnen.
| Vorlesungsverzeichnis | |||
|---|---|---|---|
| Thema | Raumnummer | Leitung | Anmerkung |
| Einführungskurs für neue Studierende | 307 | Frau Mustermann oder Herr Zufall | 2 Stunden |
| Malerei des 14. Jahrhunderts | 27 A, neues Gebäude | Professor Hans Malermeister | immer Mittwochs 14:00 bis 17:00 Uhr |
| Wer war Goethe? | Archiv Raum C | Frau Dr. Gretchen | Einmalige Führung am 27. Februar |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
! colspan="4" scope="colgroup"| Vorlesungsverzeichnis
|-
! scope="col"| Thema
! scope="col"| Raumnummer
! scope="col"| Leitung
! scope="col"| Anmerkung
|-
| scope="row"| ''Einführungskurs für neue Studierende''
| 307
| Frau Mustermann oder Herr Zufall
| 2 Stunden
|-
|scope="row"| ''Malerei des 14. Jahrhunderts''
| 27 A, neues Gebäude
| Professor Hans Malermeister
| immer Mittwochs 14:00 bis 17:00 Uhr
|-
|scope="row"| ''Wer war Goethe?''
| Archiv Raum C
| Frau Dr. Gretchen
| Einmalige Führung am 27. Februar
|}
Verschachtelte Tabellen[Bearbeiten | Quelltext bearbeiten]
Als verschachtelte Tabellen werden Tabellen innerhalb von Tabellen bezeichnet. Dabei ist zu beachten, dass eine Wikitable innerhalb ihrer Inhaltszellen und nach außen zur Umgebung einen Abstand bildet.
Dies sollte auf absolute Ausnahmefälle beschränkt bleiben.
Tabelle in Tabelle
| Tabelle in Tabelle | Kopfzelle | ||||
|---|---|---|---|---|---|
|
Inhaltszelle |
wikitable in wikitable
| Tabelle in Tabelle | Kopfzelle | ||||
|---|---|---|---|---|---|
|
Inhaltszelle |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
! Tabelle in Tabelle !! Kopfzelle
|-
|
{| style="width:100%"
|-
| Beispiel || Beispiel
|-
| Beispiel || Beispiel
|}
| Inhaltszelle
|}
Verbundene Zellen[Bearbeiten | Quelltext bearbeiten]
Beispiele für verbundene Tabellenzellen.
Mehrere Zellen markieren, verbinden, teilen – Der visuelle Editor bietet eine einfache Möglichkeit Zellen zu verbinden oder verbundene Zellen wieder zu trennen.
Nebeneinander – colspan[Bearbeiten | Quelltext bearbeiten]
Mehrere nebeneinander liegende Zellen (Spalten) verbinden. n steht für die Anzahl der Spalten.
|colspan="n"|
| Spaltenüberspannende Kopfzeile | |||||
|---|---|---|---|---|---|
| A | B | C | 1 | 2 | 3 |
| Buchstaben | Zahlenwerte | ||||
Quelltext dieser Tabelle:
{| class="wikitable"
|-
!colspan="6"| Spaltenüberspannende Kopfzeile
|-
| A || B || C || 1 || 2 || 3
|-
|colspan="3"| Buchstaben ||colspan="3"| Zahlenwerte
|}
Übereinander – rowspan[Bearbeiten | Quelltext bearbeiten]
Mehrere übereinander liegende Zellen (Zeilen) verbinden. Die Syntax für rowspan ist etwas komplizierter, für den Zeilenumbruch darf der Trenner |- nicht fehlen. Die weiteren Zeilen enthalten den nicht verbundenen Inhalt. n steht für die Anzahl der Zeilen.
|rowspan="n"|
| Kopfzelle | Kopfzelle oben | Kopfzelle |
|---|---|---|
| Kopfzelle unten | ||
| Zelle 1/1 | Zelle 2/1 bis Zelle 2/2 | Zelle 3/1 |
| Zelle 1/2 | Zelle 3/2 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
!rowspan="2"| Kopfzelle !! Kopfzelle oben !! rowspan="2"| Kopfzelle
|-
! Kopfzelle unten
|-
| Zelle 1/1 ||rowspan="2"| Zelle 2/1 bis Zelle 2/2 || Zelle 3/1
|-
| Zelle 1/2 || Zelle 3/2
|}
Anderes Beispiel
| führende Spalte | Zelle 2/1 | folgende Spalte |
| Zelle 2/2 | ||
| Zelle 2/3 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
|rowspan="3"| führende Spalte
| Zelle 2/1
|rowspan="3"| folgende Spalte
|-
| Zelle 2/2
|-
| Zelle 2/3
|}
Über- und Nebeneinander[Bearbeiten | Quelltext bearbeiten]
Es können auch Kombinationen vorgenommen werden. n und m stehen für die jeweilige Anzahl.
|colspan="n" rowspan="m"|
| 2 Spalten | Zelle 3/1 | 2 Zeilen | |
| Zelle 1/2 | 2 Spalten 2 Zeilen | ||
| Zelle 1/3 | Zelle 4/3 | ||
| Zelle 1/4 | Zelle 2/4 | Zelle 3/4 | Zelle 4/4 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
|colspan="2"| 2 Spalten || Zelle 3/1 ||rowspan="2"| 2 Zeilen
|-
| Zelle 1/2
|colspan="2" rowspan="2"| 2 Spalten 2 Zeilen
|-
| Zelle 1/3 || Zelle 4/3
|-
| Zelle 1/4 || Zelle 2/4 || Zelle 3/4 || Zelle 4/4
|}
Spaltenbreite[Bearbeiten | Quelltext bearbeiten]
Die Breite der einzelnen Spalten kann eingestellt werden. Dabei gilt es zu beachten, dass Inhalte nicht breiter als diese Vorgabe sein sollten.
Breite in %[Bearbeiten | Quelltext bearbeiten]
In diesem Beispiel sollen alle vier Spalten gleich breit sein, ihnen wurde also ein Wert von je style="width:25%" zugewiesen; für die letzte Spalte wird der fehlende Wert intern ergänzt.
style="width:25%"
Alles ok
| X | X | X | X |
|---|---|---|---|
| A | B | C | D |
Überschrift breiter als 25%
| X | X | X | XXXXX |
|---|---|---|---|
| A | B | C | D |
Inhalte breiter als 25%
| X | X | X | X |
|---|---|---|---|
| AAA | B | CCCC | D |
Quelltext dieser Tabellen:
{| class="wikitable"
|-
!style="width:25%"| X !! style="width:25%"| X !! style="width:25%"| X !! X
|-
| A || B || C || D
|}
{| class="wikitable"
|-
!style="width:25%"| X !! style="width:25%"| X !! style="width:25%"| X !! XXXXX
|-
| A || B || C || D
|}
{| class="wikitable"
|-
!style="width:25%"| X !! style="width:25%"| X !! style="width:25%"| X !! X
|-
| AAA || B || CCCC || D
|}
Breite in em[Bearbeiten | Quelltext bearbeiten]
Zum Vergleich wurde hier nun eine Breite von 1.5em vorgegeben. Sobald ein Zelleninhalt breiter als 1.5em ist wird die gesamte Spalte dadurch so breit wie dieser Inhalt.
style="width:1.5em"|
Alles ok
| X | X | X | X |
|---|---|---|---|
| A | B | C | D |
Überschriften breiter als 1.5em
| X | XX | XXX | XXXX |
|---|---|---|---|
| A | B | C | D |
Inhalte breiter als 1.5em
| X | X | X | X |
|---|---|---|---|
| AAA | B | CCCC | D |
Quelltext dieser Tabellen:
{| class="wikitable"
|-
!style="width:1.5em"| X !! style="width:1.5em"| X !! style="width:1.5em"| X !! style="width:1.5em"| X
|-
| A || B || C || D
|}
{| class="wikitable"
|-
!style="width:1.5em"| X !! style="width:1.5em"| XX !! style="width:1.5em"| XXX !! style="width:1.5em"| XXXX
|-
| A || B || C || D
|}
{| class="wikitable"
|-
!style="width:1.5em"| X !! style="width:1.5em"| X !! style="width:1.5em"| X !! style="width:1.5em"| X
|-
| AAA || B || CCCC || D
|}
Gleichbreite Spalten (Tabellen untereinander)[Bearbeiten | Quelltext bearbeiten]
Bei mehreren Tabellen, die dicht untereinander stehen, und die mit ähnlichen Inhalten und Überschriften versehen wurden kann es vorteilhaft sein, die Breite für diese Spalten einheitlich festzulegen. Das kann nur funktionieren, wenn die Inhalte die Werte für die Breiten nicht überschreiten.
|style="width: xem"|
| Jahr | Name | Anmerkung |
|---|---|---|
| 3em | 7em | 10em |
| Zeit | Name | Anmerkung |
|---|---|---|
| 1 MZ | Gandalf | Fiktive Person |
Zelleninhalt zu lang
| Jahr | Name | Anmerkung |
|---|---|---|
| Erstes Menschenzeitalter | Gandalf | Fiktive Person |
Quelltext dieser Tabellen:
{| class="wikitable"
|+ Erste Tabelle
|-
! Jahr
! Name
! Anmerkung
|-
|style="width:3em"| a: 3em
|style="width:7em"| b: 7em
|style="width:10em"| c: 10em
|}
{| class="wikitable"
|+ Zweite Tabelle
|-
! Zeit
! Name
! Anmerkung
|-
|style="width:3em"| 1 MZ
|style="width:7em"| Gandalf
|style="width:10em"| Fiktive Person
|}
CSS-Klassen für Tabellen[Bearbeiten | Quelltext bearbeiten]
Für die Gestaltung von Tabellen gibt es einige Klassen, die diesen bereits einfache Formatierungen, Tabellenränder, Abstände innerhalb der Inhaltszellen oder zu anderen Objekten im Text mitgeben. Manche Klassen lassen sich miteinander kombinieren. Um die unterschiedliche Wirkung zu zeigen, wird hier weitgehend eine Tabelle mit identischem Zelleninhalt verwendet.
Nicht alle Klassen werden von der Software für Mobilgeräte unterstützt, die Beispiele hier beziehen sich auf die klassische Desktopansicht.
Klassenlos (einfache Tabelle)[Bearbeiten | Quelltext bearbeiten]
Die Zelleninhalte einer Tabelle ohne Linieneinteilung sind meist schwerer zu erfassen. Daher sollte möglichst eine Tabelle mit Zellenrahmen verwendet werden, wie beispielsweise eine wikitable.
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Quelltext dieser Tabelle:
{|
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
wikitable[Bearbeiten | Quelltext bearbeiten]
Standardtabelle für dieses Wiki. Sie ist bereits vorformatiert.
{| class="wikitable"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Quelltext dieser Tabelle:
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
zebra[Bearbeiten | Quelltext bearbeiten]
Sonderfunktion einer wikitable. Zebra ist für Tabellen mit Zeilen, die durch rowspan verbunden sind, ungeeignet.
{| class="wikitable zebra"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
ohne rowspan
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | ohne Angabe |
| Saturnmännchen | ohne Angabe |
Quelltext dieser Tabelle:
{| class="wikitable zebra hintergrundfarbe8"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
tabelle-zeile-aktiv[Bearbeiten | Quelltext bearbeiten]
Sonderfunktion einer wikitable, bei der die Zeilen beim Überfahren mit der Maus hervorgehoben werden. Dies sollte besser ohne verbundene Zeilen (rowspan) verwendet werden. Um diese Funktion auf einer Seite zu aktivieren wird seit Ende 2021 eine zusätzliche Vorlage {{Tabellenstile}} benötigt, die direkt oberhalb der Tabelle eingebunden werden sollte.
{| class="wikitable tabelle-zeile-aktiv"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
ohne rowspan
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | ohne Angabe |
| Saturnmännchen | ohne Angabe |
Quelltext dieser Tabelle:
{{Tabellenstile}}
{| class="wikitable tabelle-zeile-aktiv"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
tabelle-kopf-fixiert[Bearbeiten | Quelltext bearbeiten]
Den Tabellenkopf (Überschrift eins, Überschrift zwei) beim Scrollen am oberen Bildschirmrand fixieren, damit er in langen Tabellen sichtbar bleibt.
{| class="wikitable tabelle-kopf-fixiert"
| Überschrift eins | Überschrift zwei |
|---|---|
| Mensch | 46 |
| Schimpanse | 48 |
| Gorillas | 48 |
| Orang-Utan | 48 |
| Rhesusaffe | 42 |
| Koboldmaki | 80 |
| Fledermaus | 44 |
| Hausmaus | 40 |
| Haushund | 78 |
| Hauskatze | 38 |
{{Tabellenstile}}
{| class="wikitable tabelle-kopf-fixiert"
|- class="hintergrundfarbe4"
!Überschrift eins || Überschrift zwei
|-
|Mensch || 46
|-
|Schimpanse || 48
|-
|Gorillas || 48
|-
|Orang-Utan || 48
|-
|Rhesusaffe || 42
|-
|Koboldmaki || 80
|-
|Fledermaus || 44
|-
|Hausmaus || 40
|-
|Haushund || 78
|-
|Hauskatze || 38
|-
|}
mw-collapsible[Bearbeiten | Quelltext bearbeiten]
Die Funktion zum Einklappen einer Tabelle sollte in Artikeln möglichst vermieden werden. Es sollte immer die aufgeklappte Tabelle verwendet werden, mit der Option den Inhalt bewusst auszublenden, andernfalls kann es passieren, dass eine Tabelle übersehen wird oder Sprungziele nicht erreichbar sind.
{| class="mw-collapsible" besser {| class="wikitable mw-collapsible"
- Attribute
mw-collapsedundmw-collapse
class="mw-collapsible"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
class="mw-collapsible mw-collapsed"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
ohne Überschrift oder Kopfzellen
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Quelltext dieser Tabellen:
{| class="wikitable mw-collapsible mw-collapse"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
{| class="wikitable mw-collapsible mw-collapsed"
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
toptextcells[Bearbeiten | Quelltext bearbeiten]
Die Inhalte aller Inhaltszellen werden vertikal am oberen Rand der Zellen ausgerichtet.
{| class="toptextcells"
| Kopfzellen-Überschrift | Kopfzellen Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Quelltext dieser Tabelle:
{| class="wikitable toptextcells"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen<br />Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
Ausrichtung der Tabelle[Bearbeiten | Quelltext bearbeiten]
Bei Tabellen gibt es unterschiedliche Möglichkeiten, um die komplette Tabelle im Text oder die Inhalte einzelner Zellen anzuordnen. Für diese Beispiele wird zur besseren Darstellung eine wikitable verwendet. Die Wirkung ist für alle Klassen für Tabellen identisch.
auf Mobilgeräten werden Tabellen linksbündig dargestellt, die Ausrichtung der gesamten Tabelle im Text ist dort wirkungslos.
– nicht verfügbar (Stand Mai 2020), alle hier beschriebenen Eigenschaften können nur in der Wikitextbearbeitung geändert werden.
Standardausrichtung[Bearbeiten | Quelltext bearbeiten]
- Die Tabelle steht linksbündig.
- Der Zelleninhalt ist linksbündig und vertikal zentriert.
- Sie wird nicht vom Fließtext umflossen.
- Rechts ausgerichtete Bilder oder Tabellen wie beispielsweise Infoboxen, können hingegen die Tabelle rechts umfließen, damit keine unnötigen Weißräume entstehen.
Standardausrichtung einer Tabelle
Simulation
Fließtext über der Tabelle
| Kopfzelle | Kopfzelle |
|---|---|
| Inhaltszelle | Inhaltszelle |
| Inhalt linksbündig |
vertikal zentriert |
Fließtext unter der Tabelle
Mit Bild rechts
Simulation
Bild und Fließtext über der Tabelle
| Kopfzelle | Kopfzelle |
|---|---|
| Inhaltszelle | Inhaltszelle |
| Inhalt linksbündig |
vertikal zentriert |
Fließtext unter der Tabelle
Quelltext der Tabelle:
[[Datei:Feather.svg|mini|hochkant|Schreibfeder]]
Fließtext über der Tabelle
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br /> linksbündig || vertikal zentriert
|}
Fließtext unter der Tabelle
Ausrichtung mit Textumfluss[Bearbeiten | Quelltext bearbeiten]
Der Textumfluss bei Tabellen sollte nach der gewünschten Umfließung zurückgesetzt werden, um unerwünschte Effekte zu vermeiden.
Linksbündig mit Textumfluss[Bearbeiten | Quelltext bearbeiten]
class="wikitable float-left"
Fließtext über der Tabelle
| Kopfzelle | Kopfzelle |
|---|---|
| Inhaltszelle | Inhaltszelle |
| Inhalt linksbündig |
vertikal zentriert |
Der Fließtext rückt nach rechts neben die Tabelle
Fließtext unter der Tabelle
Quelltext dieser Tabelle:
Fließtext über der Tabelle
{| class="wikitable float-left"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br />linksbündig || vertikal zentriert
|}
Der Fließtext rückt nach rechts neben die Tabelle
<div style="clear: left;"></div>
Fließtext unter der Tabelle
Rechtsbündig mit Textumfluss[Bearbeiten | Quelltext bearbeiten]
class="wikitable float-right"
Fließtext über der Tabelle
| Kopfzelle | Kopfzelle |
|---|---|
| Inhaltszelle | Inhaltszelle |
| Inhalt linksbündig |
vertikal zentriert |
Der Fließtext rückt nach links neben die Tabelle
Fließtext unter der Tabelle
Quelltext dieser Tabelle:
Fließtext über der Tabelle
{| class="wikitable float-right"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br />linksbündig || vertikal zentriert
|}
Der Fließtext rückt nach links neben die Tabelle
<div style="clear:right;"></div>
Fließtext unter der Tabelle
Ausrichtung zentriert[Bearbeiten | Quelltext bearbeiten]
Je nach verwendeter Klasse class="center" oder class="centered" werden auch die Zelleninhalte beeinflusst.
Tabelle normalbreit zentriert[Bearbeiten | Quelltext bearbeiten]
Simulation
class="centered"
Fließtext über der Tabelle
| Kopfzelle | Kopfzelle |
|---|---|
| Inhaltszelle | Inhaltszelle |
| Inhalt linksbündig |
vertikal zentriert |
Fließtext unter der Tabelle
Quelltext dieser Tabelle:
Fließtext über der Tabelle
{| class="wikitable centered"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br />linksbündig || vertikal zentriert
|}
Fließtext unter der Tabelle
Zentriert über die gesamte Breite[Bearbeiten | Quelltext bearbeiten]
Dabei werden auch die Inhaltszellen zentriert gesetzt.
Simulation
class="center"
Fließtext über der Tabelle
| Kopfzelle | Kopfzelle |
|---|---|
| Inhaltszelle | Inhaltszelle |
| Inhalt zentriert |
vertikal zentriert |
Fließtext unter der Tabelle
Quelltext dieser Tabelle:
Fließtext über der Tabelle
{| class="wikitable center"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br />zentriert || vertikal zentriert
|}
Fließtext unter der Tabelle
|}
Ausrichtung der Zelleninhalte[Bearbeiten | Quelltext bearbeiten]
Über Klassen am Tabellenanfang lassen sich einige Eigenschaften der Tabellen konfigurieren. Es gibt zusätzlich CSS-Style-Anweisungen, über die sich die Textausrichtung innerhalb der Zellen festlegen lässt. Standard ist in diesem Wiki die linksbündige und vertikal mittige Anordnung.
Horizontale Ausrichtung[Bearbeiten | Quelltext bearbeiten]
Zellen gemeinsam horizontal ausrichten[Bearbeiten | Quelltext bearbeiten]
Links-, rechtsbündig oder zentriert. Die Inhaltszellen lassen sich horizontal gemeinsam für die gesamte Tabelle ausrichten, dies kann aber auch zeilenweise oder für einzelne Zellen erfolgen.
Syntax: style="text-align:left;"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Standardverhalten
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
Syntax: style="text-align:right;"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Textausrichtung rechts
{| class="wikitable" style="text-align:right;"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
Syntax: style="text-align:center;"
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Textausrichtung zentriert
{| class="wikitable" style="text-align:center;"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
Info: Ähnelt class="center" jedoch ohne die Ausdehnung auf 100% der Seitenbreite
Zeilen horizontal ausrichten[Bearbeiten | Quelltext bearbeiten]
Inhaltszellen einer Zeile lassen sich ebenfalls gemeinsam ausrichten.
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|- style="text-align:right;"
| Max Mustermann || 3. Juli 1980
|- style="text-align:center;"
| Marsmännchen || ohne Angabe
|}
Zellen einzeln horizontal ausrichten[Bearbeiten | Quelltext bearbeiten]
Jede Zelle kann einzeln ausgerichtet werden. Dies gilt auch für die Tabellenüberschrift oder Kopfzellen. Auch die Anweisung style="text-align:left" kann hier genutzt werden, wenn beispielsweise alle anderen Zellen gemeinsam rechtsbündig oder zentriert stehen.
Es ist nicht möglich, wie bei einer Zeile für die gesamte Spalte eine andere Ausrichtung vorzugeben; dies muss für jede Zelle in der Spalte einzeln erfolgen.
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
| Marsmännchen | ohne Angabe |
| Mondmännchen | |
| Saturnmännchen |
Inhaltszelle (Standard linksbündig)
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle ||style="text-align:right"| 12. Februar 2020
|-
| Max Mustermann ||style="text-align:right"| 3. Juli 1980
|-
| Marsmännchen ||rowspan="3" style="text-align:center"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
| Kopfzellen-Überschrift | Kopfzellen-Überschrift |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
Tabellenüberschrift (Standard zentriert)
{| class="wikitable"
|+ style="text-align:left"| Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
| Kopfzelle | Kopfzelle |
|---|---|
| Beispieltext in der ersten Zelle | 12. Februar 2020 |
| Max Mustermann | 3. Juli 1980 |
Kopfzelle (Standard zentriert)
{| class="wikitable"
|+ Tabellenüberschrift
|-
!style="text-align:left"| Kopfzelle !! style="text-align:right"| Kopfzelle
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
Vertikale Ausrichtung[Bearbeiten | Quelltext bearbeiten]
Text oben, unten oder mittig ausrichten.
Zellen gemeinsam vertikal ausrichten[Bearbeiten | Quelltext bearbeiten]
Alle Inhaltszellen gemeinsam lassen sich nur über die class="toptextcells" ausrichten. Ansonsten können die Zellen nur zeilenweise oder einzeln ausgerichtet werden.
Zeilen vertikal ausrichten[Bearbeiten | Quelltext bearbeiten]
Syntax: style="vertical-align:top;" oder style="vertical-align:bottom;" ein style="vertical-align:middle;" Standardverhalten, kann entfallen
|
oben | Inhalt |
|
unten | Inhalt |
| A B C |
mittig | Inhalt |
{| class="wikitable"
|- style="vertical-align:top;"
| [[Datei:Lilie stilisiert.svg|x120px|Lilie]]
| oben
| Inhalt
|- style="vertical-align:bottom;"
| [[Datei:Pilz Masoala.JPG|x120px|Ein Pilz]]
| unten
| Inhalt
|-
| A<br />B<br />C
| mittig
| Inhalt
|}
Zellen einzeln vertikal ausrichten[Bearbeiten | Quelltext bearbeiten]
Inhaltszellen können einzeln vertikal ausgerichtet werden. Der Effekt wird nur sichtbar, wenn die Zellen höher als eine normale Zeile sind oder mehrere Zeilenumbrüche enthalten.
| A B C |
oben | unten | mittig |
|
|
oben | unten | mittig |
{| class="wikitable"
|-
| A<br />B<br />C
|style="vertical-align:top;"| oben
|style="vertical-align:bottom;"|unten
| mittig
|-
| [[Datei:Pilz Masoala.JPG|x120px|Ein Pilz]]
|style="vertical-align:top;"| oben
|style="vertical-align:bottom;"|unten
| mittig
|}
Dekoration[Bearbeiten | Quelltext bearbeiten]
Info: Farben sollten immer nur sparsam eingesetzt werden.
CSS-Klassen für Farben[Bearbeiten | Quelltext bearbeiten]
Mit class="hintergrundfarbeX" kann eine der 9 Wikipedia-Standardfarben vergeben werden, wobei anstelle des „X“ eine Ziffer zwischen 1 und 9 verwendet wird.
| Hintergrundfarbe | RGB-Code | Standard bei |
|---|---|---|
| hintergrundfarbe1 | #F8F9FA | class="wikitable" (Inhaltszellen) |
| hintergrundfarbe2 | #FFFFFF | |
| hintergrundfarbe3 | #FFFF40 | keine Standardverwendung |
| hintergrundfarbe4 | #FFAA00 | |
| hintergrundfarbe5 | #EAECF0 | class="wikitable" (Kopfzellen) |
| hintergrundfarbe6 | #B3B7FF | keine Standardverwendung |
| hintergrundfarbe7 | #FFCBCB | |
| hintergrundfarbe8 | #FFEBAD | |
| hintergrundfarbe9 | #B9FFC5 |
Farbe aller Inhaltszellen gemeinsam ändern[Bearbeiten | Quelltext bearbeiten]
Tabellenanfang {|
class – hintergrundfarbe 1 bis 9
{| class="wikitable hintergrundfarbeX"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
{| class="hintergrundfarbe5"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Quelltext dieser Tabelle:
{| class="wikitable hintergrundfarbe8"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
style – frei wählbare Farben
{| class="wikitable" style="background:#RRGGBB;"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
{| style="background:#FEDCBA;"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Quelltext dieser Tabelle:
{| class="wikitable" style="background:#ABCDEF;"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
Farbe einer Zeile ändern[Bearbeiten | Quelltext bearbeiten]
Anweisung nach dem Zeilentrenner |-
class – hintergrundfarbe 1 bis 9
|- class="hintergrundfarbeX"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
| Fußzelle | Fußzelle | Fußzelle |
Einfache Tabelle
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
| Fußzelle | Fußzelle | Fußzelle |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|- class="hintergrundfarbe9"
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|- class="hintergrundfarbe4"
! Fußzelle !! Fußzelle !! Fußzelle
|}
style – frei wählbare Farben
|- style="background:#RRGGBB;"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Einfache Tabelle
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Einfache sortierbare Tabelle (toccolours)
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Quelltext dieser Tabellen:[2]
{| class="wikitable" style="background:#ABCDEF;"
|- style="background:#ABCDEF;"
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|- style="background:#ABCDEF;"
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
{| class="toccolours sortable" |- style="background:#FEDCBA;" ! Kopfzelle !! Kopfzelle !! Kopfzelle |- | Zelle 1 || Zelle 2 || Zelle 3 |- style="background:#FEDCBA;" | Zelle 4 || Zelle 5 || Zelle 6 |- | Zelle 7 || Zelle 8 || Zelle 9 |}
Farbe einer Spalte/Zelle ändern[Bearbeiten | Quelltext bearbeiten]
Um eine komplette Spalte einzufärben muss jede einzelne Zelle einer Spalte mit einer Farbzuweisung versehen werden. Es ist in unserem Wikitext nicht möglich, wie bei einer Zeile für die gesamte Spalte eine andere Farbe oder Ausrichtung vorzugeben.
class – hintergrundfarbe 1 bis 9
|class="hintergrundfarbeX"|
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Einfache Tabelle
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
! Kopfzelle !! class="hintergrundfarbe4"| Kopfzelle !! Kopfzelle
|-
| Zelle 1 ||class="hintergrundfarbe8"| Zelle 2 || Zelle 3
|-
| Zelle 4 ||class="hintergrundfarbe8"| Zelle 5 ||class="hintergrundfarbe6"| Zelle 6
|-
|class="hintergrundfarbe7"| Zelle 7 ||class="hintergrundfarbe8"| Zelle 8 || Zelle 9
|}
style – frei wählbare Farben
{| class="wikitable" style="background:#RRGGBB;"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Einfache Tabelle
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Quelltext dieser Tabelle:
{| class="wikitable"
|-
! Kopfzelle !! style="background:#FFCC66"| Kopfzelle !! Kopfzelle
|-
| Zelle 1 ||style="background:#EECC00"| Zelle 2 || Zelle 3
|-
| Zelle 4 ||style="background:#EECC00"| Zelle 5 ||style="background:#BBDDCC"| Zelle 6
|-
|style="background:#FEDCBA"| Zelle 7 ||style="background:#EECC00"| Zelle 8 || Zelle 9
|}
Einschränkungen[Bearbeiten | Quelltext bearbeiten]
Die Möglichkeiten der Farbgebung werden durch die verwendeten Tabellen-Klassen beeinflusst. So wäre es beispielsweise möglich, nur einzelne Zellen einer Tabelle class="wikitable tabelle-zeile-aktiv" (mit einer Style-Anweisung) farblich zu verändern. Dies setzt jedoch den Effekt der Hervorhebung beim Überfahren mit der Maus für so eingefärbte Zellen außer Kraft. Daher sollten solchen Formatierungen nicht verwendet werden. In diesem Beispiel kann man deutlich sehen, dass die beiden unteren individuell gefärbten Zeilen keinen sichtbaren Effekt (beim Überfahren mit der Maus sollten hellblau hervorgehoben werden) haben.
class="wikitable tabelle-zeile-aktiv"
| Kopfzelle | Kopfzelle | Kopfzelle |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
| Zelle 10 | Zelle 11 | Zelle 12 |
Quelltext dieser Tabelle:
{| class="mw-datatable hintergrundfarbe3"
|- style="background:#ABCDEF;"
! Kopfzelle !! style="background:#FEDCBA"| Kopfzelle !! Kopfzelle
|-
|class="hintergrundfarbe4"| Zelle 1 || Zelle 2 || Zelle 3
|- style="background:#ABCDEF;"
| Zelle 4 || Zelle 5 || Zelle 6
|-
|style="background:#FFBBAA"| Zelle 7 ||style="background:#AABBCC"| Zelle 8 ||style="background:#ABCDEF"| Zelle 9
|-
|style="background:#FFFFFF"| Zelle 10 ||style="background:#FFFFFF"| Zelle 11 ||style="background:#FFFFFF"| Zelle 12
|}
Sortierung[Bearbeiten | Quelltext bearbeiten]
Info: Die Sortierung sollte in Artikeln nur sparsam eingesetzt werden, sie sollte dem Leser einen wirklichen Vorteil bringen. Es sollten mindestens 5 bis 10 Zeilen vorhanden sein, einzeilige Tabellen können nicht, zweizeilige müssen nicht sortiert werden.
mit farbigem Tabellenkopf, in Wikipedia-Standardfarben[Bearbeiten | Quelltext bearbeiten]
Soll eine sortierbare Tabelle in der Kopfzeile (! Kopfzellen) zusätzlich mit einem farbigen Hintergrund versehen werden, dann sollte dies möglichst über eine Klassenzuweisung mit Wirkung auf die komplette Zeile erfolgen, siehe Hilfe:Farbe #Hintergrundfarben. Farben sollten auch hier, wie bei allen Tabellen, möglichst sparsam eingesetzt werden.
|- class="hintergrundfarbe…"
| Vorname | Name | Größe |
|---|---|---|
| John | Smith | 1,85 |
| Ron | Ray | 1,89 |
| Mario | Bianchi | 1,72 |
| Durchschnitt: | 1,82 | |
Quelltext dieser Tabelle:
{| class="wikitable sortable"
|- class="hintergrundfarbe8"
! Vorname !! Name !! Größe
|-
| John || Smith || 1,85
|-
| Ron || Ray || 1,89
|-
| Mario || Bianchi || 1,72
|-
!colspan="2"| Durchschnitt: !! 1,82
|}
mit farbigem Tabellenkopf, Farbe frei wählbar[Bearbeiten | Quelltext bearbeiten]
Falls das Farbangebot der Klassenzuweisung nicht ausreicht, kann die Überschrift auch mit einer beliebigen Hintergrundfarbe versehen werden.
- Dabei muss jedoch darauf geachtet werden, dass jeder einzelnen Zelle der Kopfzeile dieser Farbwert über ein
style-Attribut zugewiesen werden muss und dass bei sortierbaren Tabellen (class="wikitable" oder class="mw-collapsible)style="background-color:#RRGGBB"verwendet werden muss, damit durch die Style-Zuweisung nicht versehentlich die Sortierpfeile deaktiviert werden.
! style="background-color:#RRGGBB;"|
| Vorname | Name | Größe |
|---|---|---|
| John | Smith | 1,85 |
| Ron | Ray | 1,89 |
| Mario | Bianchi | 1,72 |
| Durchschnitt: | 1,82 | |
! style="background:#RRGGBB;"| ohne Pfeile
| Vorname | Name | Größe |
|---|---|---|
| John | Smith | 1,85 |
| Ron | Ray | 1,89 |
| Mario | Bianchi | 1,72 |
| Durchschnitt: | 1,82 | |
Quelltext dieser Tabelle:
{| class="wikitable sortable"
|-
!style="background-color:#6B8E23"| Vorname
!style="background-color:#6B8E23"| Name
!style="background-color:#6B8E23"| Größe
|-
| John || Smith || 1,85
|-
| Ron || Ray || 1,89
|-
| Mario || Bianchi || 1,72
|-
!colspan="2"| Durchschnitt: !! 1,82
|}
Klappfunktion[Bearbeiten | Quelltext bearbeiten]
Info: Inhalte sollten in Artikeln generell nicht verborgen werden. Technisch lässt sich ein Inhalt einklappen.
- Dies wird oftmals in Navigationsleisten verwendet, deren Inhalt nicht in direktem Bezug zum Artikel steht.
- Denkbar ist die Anwendung für eine Tabelle, die als Legende dient, wie dies beispielsweise in der Vorlage:Legende Rennergebnisse umgesetzt wurde.
- Ein Beispiel für eine klappbare Tabelle mit vielen eingeklappten Bereichen ist die Seite Wikipedia:Handbuch.
Unterstützende Vorlagen[Bearbeiten | Quelltext bearbeiten]
Für Piktogramme als Inhalt von Tabellenzellen sind im Sinne der Barrierefreiheit Vorlagen vorzuziehen, die auch einen (für Screenreader) lesbaren Text oder zumindest einen Hinweis als Tooltip mitliefern. Anderenfalls sollte das Piktogramm durch einen Text ergänzt werden.
| schlecht: | ✓ | ☑ | ✘ |
| besser: | ✓ ok | ☑ check | 
|
Weitere Informationen[Bearbeiten | Quelltext bearbeiten]
- Hilfe:Tabellen – Grundlagen, einfache Tabellen
- Hilfe:Tabellen/Wikisyntax – Syntaxelemente der Tabellen
- Hilfe:Tabellen/VisualEditor – Tabellen in der visuellen Bearbeitung
- Hilfe:Tabellen/Sortierung – Spezialfunktion für sortierbare Tabellen
- Hilfe:Tabellen für Fortgeschrittene – erweiterte Gestaltungsmöglichkeiten
- Hilfe:Infoboxen, Hilfe:Navigationsleisten, Wikipedia:Taxoboxen, Wikipedia:Formatvorlage – Spezielle Tabellenformen
Anmerkungen[Bearbeiten | Quelltext bearbeiten]
- ↑ a b Auf Mobilgeräten steht die Tabellenüberschrift linksbündig.
- ↑ Die Anweisung ist bei der Verwendung mit
class="wikitable"für Kopfzeilen wirkungslos, siehe auch Einschränkungen. Einige Tabellen können auch zeilenweise eingefärbt werden, dies gilt auch fürclass="sortable".