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
BearbeitenUm 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
BearbeitenOhne 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
BearbeitenUm 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
BearbeitenZeilen
| 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
BearbeitenEs 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
BearbeitenUm 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
BearbeitenUm 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
BearbeitenEs 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
BearbeitenEine 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
BearbeitenManchmal 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; color:#202122;"| …
Position der Überschrift ändern
BearbeitenDer zentralen Tabellenüberschrift kann durch das Style-Attribut style="caption-side:…;" eine abweichende Position zugewiesen werden.
- In Artikeln sollten Überschriften nicht unter 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
|}
Kopfzellen
BearbeitenKopfzellen ! 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
BearbeitenInhaltszellen | 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
BearbeitenDas 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
BearbeitenAls 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
BearbeitenBeispiele 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
BearbeitenMehrere 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
BearbeitenMehrere ü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
BearbeitenEs 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
BearbeitenDie Breite der einzelnen Spalten kann eingestellt werden. Dabei gilt es zu beachten, dass Inhalte nicht breiter als diese Vorgabe sein sollten.
Breite in %
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
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)
BearbeitenBei 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
BearbeitenFü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)
BearbeitenDie 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
BearbeitenStandardtabelle 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
BearbeitenSonderfunktion 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
|}
Info: im Dunkelmodus ist keine Änderung der Hintergrundfarbe möglich, es wird immer die für zebra vorgesehene Standardeinfärbung umgesetzt.
| 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 |
tabelle-zeile-aktiv
BearbeitenSonderfunktion 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
BearbeitenDen 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
BearbeitenDie 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
BearbeitenDie 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
BearbeitenBei 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- 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
BearbeitenDer Textumfluss bei Tabellen sollte nach der gewünschten Umfließung zurückgesetzt werden, um unerwünschte Effekte zu vermeiden.
Linksbündig mit Textumfluss
Bearbeitenclass="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
Bearbeitenclass="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
BearbeitenJe nach verwendeter Klasse class="center" oder class="centered" werden auch die Zelleninhalte beeinflusst.
Tabelle normalbreit zentriert
BearbeitenSimulation
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
BearbeitenDabei 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Ü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
BearbeitenZellen gemeinsam horizontal ausrichten
BearbeitenLinks-, 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
BearbeitenInhaltszellen 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
BearbeitenJede 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
BearbeitenText oben, unten oder mittig ausrichten.
Zellen gemeinsam vertikal ausrichten
BearbeitenAlle Inhaltszellen gemeinsam lassen sich nur über die class="toptextcells" ausrichten. Ansonsten können die Zellen nur zeilenweise oder einzeln ausgerichtet werden.
Zeilen vertikal ausrichten
BearbeitenSyntax: 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;"
|class="skin-invert"| [[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
BearbeitenInhaltszellen 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
BearbeitenInfo: Farben sollten immer nur sparsam eingesetzt werden.
CSS-Klassen für Farben
BearbeitenMit class="hintergrundfarbeX" kann eine der 9 Wikipedia-Standardfarben vergeben werden, wobei anstelle des „X“ eine Ziffer zwischen 1 und 9 verwendet wird. Seit Juli 2024 gibt es zudem die Möglichkeit, einer Tabelle eine Basishintergrundfarbe hintergrundfarbe-basis zu übergeben, die für eine bessere Darstellung bei der Verwendung des Dark Modes (Dunkelmodus) führt.
| Hintergrundfarbe | RGB-Code | Standard bei Hell- oder Dunkelmodus | |
|---|---|---|---|
| hintergrundfarbe-basis | #FFFFFF | #101418 | dem Seitenhintergrund entsprechend |
| hintergrundfarbe1 | #F8F9FA | #202122 | class="wikitable" (Inhaltszellen) |
| hintergrundfarbe2 | #FFFFFF | keine Standardverwendung | |
| hintergrundfarbe3 | #FFFF40 | ||
| hintergrundfarbe4 | #FFAA00 | ||
| hintergrundfarbe5 | #EAECF0 | #27292D | class="wikitable" (Kopfzellen) |
| hintergrundfarbe6 | #B3B7FF | keine Standardverwendung | |
| hintergrundfarbe7 | #FFCBCB | ||
| hintergrundfarbe8 | #FFEBAD | ||
| hintergrundfarbe9 | #B9FFC5 | ||
Farbe aller Inhaltszellen gemeinsam ändern
BearbeitenTabellenanfang {|
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; color:#202122;"
| 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; color:#{{Standardfarbe|text|body}};"
|-
! 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
BearbeitenAnweisung 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; color:#{{Standardfarbe|text|body}};"
|- style="background:#ABCDEF; color:#202122;"
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|- style="background:#ABCDEF; color:#202122;"
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
{| class="toccolours sortable" |- style="background:#FEDCBA; color:#202122;" ! Kopfzelle !! Kopfzelle !! Kopfzelle |- | Zelle 1 || Zelle 2 || Zelle 3 |- style="background:#FEDCBA; color:#202122;" | Zelle 4 || Zelle 5 || Zelle 6 |- | Zelle 7 || Zelle 8 || Zelle 9 |}
Farbe einer Spalte/Zelle ändern
BearbeitenUm 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; color:#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; color:#202122;"| Kopfzelle !! Kopfzelle
|-
| Zelle 1 ||style="background:#EECC00; color:#202122;"| Zelle 2 || Zelle 3
|-
| Zelle 4 ||style="background:#EECC00; color:#202122;"| Zelle 5 ||style="background:#BBDDCC; color:#202122;"| Zelle 6
|-
|style="background:#FEDCBA; color:#202122;"| Zelle 7 ||style="background:#EECC00; color:#202122;"| Zelle 8 || Zelle 9
|}
Einschränkungen
BearbeitenDie 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="hintergrundfarbe3 tabelle-zeile-aktiv"
|- style="background:#ABCDEF; color:#202122;"
! Kopfzelle !! style="background:#FEDCBA; color:#202122;"| Kopfzelle !! Kopfzelle
|-
|class="hintergrundfarbe4"| Zelle 1 || Zelle 2 || Zelle 3
|- style="background:#ABCDEF; color:#202122;"
| Zelle 4 || Zelle 5 || Zelle 6
|-
|style="background:#FFBBAA; color:#202122;"| Zelle 7 ||style="background:#AABBCC; color:#202122;"| Zelle 8 ||style="background:#ABCDEF; color:#202122;"| Zelle 9
|-
|style="background:#FFFFFF; color:#202122;"| Zelle 10 ||style="background:#FFFFFF; color:#202122;"| Zelle 11 ||style="background:#FFFFFF; color:#202122;"| Zelle 12
|}
Sortierung
BearbeitenInfo: 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
BearbeitenSoll 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
BearbeitenFalls 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; color:#202122;"|
| Vorname | Name | Größe |
|---|---|---|
| John | Smith | 1,85 |
| Ron | Ray | 1,89 |
| Mario | Bianchi | 1,72 |
| Durchschnitt: | 1,82 | |
! style="background:#RRGGBB; color:#202122;"| 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; color:#202122;"| Vorname
! style="background-color:#6B8E23; color:#202122;"| Name
! style="background-color:#6B8E23; color:#202122;"| Größe
|-
| John || Smith || 1,85
|-
| Ron || Ray || 1,89
|-
| Mario || Bianchi || 1,72
|-
!colspan="2"| Durchschnitt: !! 1,82
|}
Klappfunktion
BearbeitenInfo: 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
BearbeitenFü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- 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- ↑ 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".