Hilfe:Tabellen/Beispiele

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

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.

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 Elemente einfügen kann über den Unterpunkt Tabelle eine zunächst leere Tabelle mit vier Zeilen, vier Spalten und einem zugehörigen Tabellenmenü erzeugt werden.
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).

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ür border-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

Um eine Zeile mit einer Linie oben oder unten darzustellen können die Eigenschaften über

  • style="border-top:…;" – Randeigenschaften oben
  • style="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
Zelle 1 Zelle 2 Zelle 3
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
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
|}

Um eine Spalte mit einer Linie links oder rechts darzustellen können die Eigenschaften über

  • style="border-left:…;" – Randeigenschaften links
  • style="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 1 Zelle 2 Zelle 3
Zelle 1 Zelle 2 Zelle 3
Zelle 1 Zelle 2 Zelle 3

|style="border-right: hidden; border-left: hidden;"|
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: 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
|}

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, color oder 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

Text der Überschrift
Zelle 1 Zelle 2 Zelle 3 Zelle 4

mit class="wikitable"

Text der Überschrift
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")

Überschrift linksbündig
Zelle 1 Zelle 2 Zelle 3 Zelle 4

Quelltext für die Zeile:

|+ style="text-align:left;"| …
Überschrift rechtsbündig
Zelle 1 Zelle 2 Zelle 3 Zelle 4

Quelltext für die Zeile:

|+ style="text-align:right;"| …
Überschrift mit Abstand
Zelle 1 Zelle 2 Zelle 3 Zelle 4

Quelltext für die Zeile:

|+ style="margin-bottom:1em;"| …
Abstand und Randlinie unten
Zelle 1 Zelle 2 Zelle 3 Zelle 4

Quelltext für die Zeile:

|+ style="margin-bottom:1em; border-bottom:1px solid #999999;"| …
Überschrift mit Rahmen
Zelle 1 Zelle 2 Zelle 3 Zelle 4

Quelltext für die Zeile:

|+ style="border:1px solid #555555;"| …
Überschrift mit Rahmen und Hintergrundfarbe
Zelle 1 Zelle 2 Zelle 3 Zelle 4

Quelltext für die Zeile:

|+ class="hintergrundfarbe4" style="border:1px solid #555555;"| …
Überschrift mit Rahmen und Hintergrundfarbe
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

[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 unter Tabellen positioniert werden.

|+ style="caption-side:bottom;"| …

Überschrift unten setzen
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 ! 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.

! !!

Tabellenüberschrift
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 | enthalten den eigentlichen Inhalt der einzelnen Tabellenzellen. Sie können mit Text, Bildern, Listen, Links, Zahlenwerten, Vorlagen … gefüllt werden.

| ||

Datei Liste Verlinkung Datum
Ein Dinosaurier
  • Buchreihe 1
    • Trilogie Teil 1
    • Trilogie Teil 2
    • Trilogie Teil 3
  • Buchreihe 2
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
Beispiel Beispiel
Beispiel Beispiel
Inhaltszelle

wikitable in wikitable

Tabelle in Tabelle Kopfzelle
Beispiel Beispiel
Beispiel Beispiel
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
|}

Die Breite der einzelnen Spalten kann eingestellt werden. Dabei gilt es zu beachten, dass Inhalte nicht breiter als diese Vorgabe sein sollten.

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
|}

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"|

Erste Tabelle
Jahr Name Anmerkung
3em 7em 10em
Zweite Tabelle
Zeit Name Anmerkung
1 MZ Gandalf Fiktive Person

Zelleninhalt zu lang

Zweite Tabelle
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.

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.

Tabellenüberschrift
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
|}

Standardtabelle für dieses Wiki. Sie ist bereits vorformatiert.

{| class="wikitable"

Tabellenüberschrift
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
|}

Sonderfunktion einer wikitable. Zebra ist für Tabellen mit Zeilen, die durch rowspan verbunden sind, ungeeignet.

{| class="wikitable zebra"

Tabellenüberschrift
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

Tabellenüberschrift
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.

Tabellenüberschrift
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

[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"

Tabellenüberschrift
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

Tabellenüberschrift
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
|-
|}

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-collapsed und mw-collapse

class="mw-collapsible"

Tabellenüberschrift
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
|}

Die Inhalte aller Inhaltszellen werden vertikal am oberen Rand der Zellen ausgerichtet.

{| class="toptextcells"

Tabellenüberschrift
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

Tabellenüberschrift
Kopfzelle Kopfzelle
Inhaltszelle Inhaltszelle
Inhalt
linksbündig
vertikal zentriert

Fließtext unter der Tabelle

Mit Bild rechts

Simulation

Schreibfeder

Bild und Fließtext über der Tabelle

Tabellenüberschrift
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

Tabellenüberschrift
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

Tabellenüberschrift
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

Tabellenüberschrift
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

Tabellenüberschrift
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;"

Tabellenüberschrift
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;"

Tabellenüberschrift
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;"

Tabellenüberschrift
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.


Tabellenüberschrift
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.


Tabellenüberschrift
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
|}
Tabellenüberschrift
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
|}
Tabellenüberschrift
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;"
|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

[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
|}

 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. 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

[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; 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

[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; 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

[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; 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

[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; 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
|}

 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; 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
|}

 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 Rotes X oder Kreuzchensymbol für nein

Weitere Informationen

[Bearbeiten | Quelltext bearbeiten]
  1. 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ür class="sortable".