Hilfe:Tabellen/Beispiele

Auf dieser Hilfeseite werden Beispiele für Tabellen mit der zugehörigen Syntax dargestellt, damit man die Wirkung einer Formatierung über Klassen- oder Stylezuweisungen nachvollziehen kann. Dafür wird den Beispielen der erzeugende Quelltext nachgestellt.

Es gibt Bearbeiter, die eher aus einem Beispiel lernen als aus der syntaktischen Definition und Erläuterungen.

Grundlagen

Um eine Tabelle zu erstellen können, je nachdem welches Bearbeitungswerkzeug verwendet wird, Hilfsmittel genutzt werden, die eine Grundstruktur erstellen.

visueller Editor Visuelle Bearbeitung
Im Menüpunkt Einfügen Elemente einfügen kann über den Unterpunkt icon Tabelle eine zunächst leere Tabelle mit vier Zeilen, vier Spalten und einem zugehörigen Tabellenmenü erzeugt werden.
Siehe Hilfe:Tabellen/VisualEditor#Einfache Tabellen
OOjs UI icon wikiText.svg Quelltextbearbeitung
Vector-Skin: Ein identisches Symbol OOjs UI icon table.svg 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

Ohne jegliche Zuweisung (Klassen, Styles oder Tabellenattribute) ist eine Tabelle zunächst transparent, lediglich die Formatierung unter- oder nebeneinander liegender Inhalte wird umgesetzt (Hilfe:Tabellen #einfach).

Zellenränder

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

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

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

Zeilenweise

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

Spaltenweise

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

Ecken abrunden

Es ist technisch möglich den Rahmen einer Tabelle mit abgerundeten Ecken zu präsentieren. Dies ist allerdings für class="wikitable" oder class="mw-datatable" 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

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

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

Position der Überschrift ändern

Der zentralen Tabellenüberschrift kann durch das Style-Attribut style="caption-side:…;" eine abweichende Position zugewiesen werden.

  • In Artikeln sollten Überschriften nicht neben Tabellen positioniert werden.

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

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

|+ style="caption-side:right; margin-left:.5em;"| …

Überschrift rechts
Zelle 1 Zelle 2
Zelle 3 Zelle 4

|+ style="caption-side:left; margin-right:.5em;"| …

Überschrift links
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Quelltext der Tabelle: (Überschrift rechts)

{| class="wikitable"
|+ style="caption-side:right; margin-left:.5em;"| Überschrift rechts
|-
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|}

Kopfzellen

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

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

Verschachtelte Tabellen

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

Beispiele für verbundene Tabellenzellen.

visueller Editor Mehrere Zellen markieren, verbinden, teilen – Der visuelle Editor bietet eine einfache Möglichkeit Zellen zu verbinden oder verbundene Zellen wieder zu trennen.

Nebeneinander – colspan

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

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

Es können auch Kombinationen vorgenommen werden. n und m stehen für die jeweilige Anzahl.

|colspan="n" rowspan="m"|

2 Spalten Zelle 3/1 2 Zeilen
Zelle 1/2 2 Spalten 2 Zeilen
Zelle 1/3 Zelle 4/3
Zelle 1/4 Zelle 2/4 Zelle 3/4 Zelle 4/4

Quelltext dieser Tabelle:

{| class="wikitable"
|-
|colspan="2"| 2 Spalten || Zelle 3/1 ||rowspan="2"| 2 Zeilen
|-
| Zelle 1/2
|colspan="2" rowspan="2"| 2 Spalten 2 Zeilen
|-
| Zelle 1/3 || Zelle 4/3
|-
| Zelle 1/4 || Zelle 2/4 || Zelle 3/4 || Zelle 4/4
|}

Spaltenbreite

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

Breite in %

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

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)

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

Für die Gestaltung von Tabellen gibt es einige Klassen, die diesen bereits einfache Formatierungen, Tabellenränder, Abstände innerhalb der Inhaltszellen oder zu anderen Objekten im Text mitgeben. Manche Klassen lassen sich miteinander kombinieren. Um die Unterschiedliche Wirkung zu zeigen, wird hier weitgehend eine Tabelle mit identischem Zelleninhalt verwendet.

Nicht alle Klassen werden von der Software für Mobilgeräte unterstützt, die Beispiele hier beziehen sich auf die klassische Desktopansicht.

Klassenlos (einfache Tabelle)

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

wikitable

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

zebra

Sonderfunktion einer wikitable. Zebra sollte besser ohne verbundene Zeilen rowspan verwendet werden.

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

mw-datatable

Eine Tabelle, bei der die Zeilen beim überfahren mit der Maus hervorgehoben werden. Diese Tabelle sollte besser ohne verbundene Zeilen rowspan verwendet werden.

{| class="mw-datatable"

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="mw-datatable"
|+ 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
|}

mw-collapsible

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

toptextcells

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

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.
visueller Editor – nicht verfügbar (Stand Mai 2020), alle hier beschriebenen Eigenschaften können nur in der Wikitextbearbeitung geändert werden.

Standardausrichtung

  • 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

Der Textumfluss bei Tabellen sollte nach der gewünschten Umfließung zurückgesetzt werden, um unerwünschte Effekte zu vermeiden.

Linksbündig mit Textumfluss

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

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

Je nach verwendeter Klasse class="center" oder class="centered" werden auch die Zelleninhalte beeinflusst.

Tabelle normalbreit zentriert

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

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

Ü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

Zellen gemeinsam horizontal ausrichten

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

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

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

Text oben, unten oder mittig ausrichten.

Zellen gemeinsam vertikal ausrichten

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

Syntax: style="vertical-align:top;" oder style="vertical-align:bottom;" ein style="vertical-align:middle;" Standardverhalten, kann entfallen

Lilie oben Inhalt
Ein Pilz unten Inhalt
A
B
C
mittig Inhalt
{| class="wikitable"
|- style="vertical-align:top;"
| [[Datei:Lilie stilisiert.svg|x120px|Lilie]]
| oben
| Inhalt
|- style="vertical-align:bottom;"
| [[Datei:Pilz Masoala.JPG|x120px|Ein Pilz]]
| unten
| Inhalt
|-
| A<br />B<br />C
| mittig
| Inhalt
|}

Zellen einzeln vertikal ausrichten

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
Ein Pilz 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

 Info: Farben sollten immer nur sparsam eingesetzt werden.

CSS-Klassen für Farben

Mit class="hintergrundfarbeX" kann eine der 9 Wikipedia-Standardfarben vergeben werden, wobei anstelle des „X“ eine Ziffer zwischen 1 und 9 verwendet wird.

Hintergrundfarbe RGB-Code Standard bei
hintergrundfarbe1 #F8F9FA class="wikitable" (Inhaltszellen)
hintergrundfarbe2 #FFFFFF class="mw-datatable" (Inhaltszellen, weiß)
hintergrundfarbe3 #FFFF40 keine Standardverwendung
hintergrundfarbe4 #FFAA00
hintergrundfarbe5 #EAECF0 class="wikitable" (Kopfzellen)
hintergrundfarbe6 #B3B7FF keine Standardverwendung
hintergrundfarbe7 #FFCBCB
hintergrundfarbe8 #FFEBAD
hintergrundfarbe9 #B9FFC5

Farbe aller Inhaltszellen gemeinsam ändern

Tabellenanfang {|

class – hintergrundfarbe 1 bis 9

{| class="wikitable hintergrundfarbeX"

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

{| class="hintergrundfarbe5"

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Quelltext dieser Tabelle:

{| class="wikitable hintergrundfarbe8"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

style – frei wählbare Farben

{| class="wikitable" style="background:#RRGGBB;"

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

{| style="background:#FEDCBA;"

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Quelltext dieser Tabelle:

{| class="wikitable" style="background:#ABCDEF;"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Farbe einer Zeile ändern

Anweisung nach dem Zeilentrenner |-

class – hintergrundfarbe 1 bis 9

|- class="hintergrundfarbeX"

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Fußzelle Fußzelle Fußzelle

Einfache Tabelle

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Fußzelle Fußzelle Fußzelle

Quelltext dieser Tabelle:

{| class="wikitable"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|- class="hintergrundfarbe9"
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|- class="hintergrundfarbe4"
! Fußzelle !! Fußzelle !! Fußzelle
|}

style – frei wählbare Farben

|- style="background:#RRGGBB;"

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Einfache Tabelle

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Einfache sortierbare Tabelle (toccolours)

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Quelltext dieser Tabellen:[2]

{| class="wikitable" style="background:#ABCDEF;"
|- style="background:#ABCDEF;"
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|- style="background:#ABCDEF;"
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

{| class="toccolours sortable" |- style="background:#FEDCBA;" ! Kopfzelle !! Kopfzelle !! Kopfzelle |- | Zelle 1 || Zelle 2 || Zelle 3 |- style="background:#FEDCBA;" | Zelle 4 || Zelle 5 || Zelle 6 |- | Zelle 7 || Zelle 8 || Zelle 9 |}

Farbe einer Spalte/Zelle ändern

Um eine komplette Spalte einzufärben muss jede einzelne Zelle einer Spalte mit einer Farbzuweisung versehen werden. Es ist in unserem Wikitext nicht möglich, wie bei einer Zeile für die gesamte Spalte eine andere Farbe oder Ausrichtung vorzugeben.

class – hintergrundfarbe 1 bis 9

|class="hintergrundfarbeX"|

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Einfache Tabelle

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Quelltext dieser Tabelle:

{| class="wikitable"
|-
! Kopfzelle !! class="hintergrundfarbe4"| Kopfzelle !! Kopfzelle
|-
| Zelle 1 ||class="hintergrundfarbe8"| Zelle 2 || Zelle 3
|-
| Zelle 4 ||class="hintergrundfarbe8"| Zelle 5 ||class="hintergrundfarbe6"| Zelle 6
|-
|class="hintergrundfarbe7"| Zelle 7 ||class="hintergrundfarbe8"| Zelle 8 || Zelle 9
|}

style – frei wählbare Farben

{| class="wikitable" style="background:#RRGGBB;"

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Einfache Tabelle

Kopfzelle Kopfzelle Kopfzelle
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Quelltext dieser Tabelle:

{| class="wikitable"
|-
! Kopfzelle !! style="background:#FFCC66"| Kopfzelle !! Kopfzelle
|-
| Zelle 1 ||style="background:#EECC00"| Zelle 2 || Zelle 3
|-
| Zelle 4 ||style="background:#EECC00"| Zelle 5 ||style="background:#BBDDCC"| Zelle 6
|-
|style="background:#FEDCBA"| Zelle 7 ||style="background:#EECC00"| Zelle 8 || Zelle 9
|}

Einschränkungen

Die Möglichkeiten der Farbgebung werden durch die verwendeten Tabellen-Klassen beeinflusst, so wäre es beispielsweise nur für einzelne Zellen eine Tabelle class="mw-datatable" (mit einer Style-Anweisung) möglich diese 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. Auch die übrigen Anweisungen zur Farbgebung für eine Reihe oder den Hintergrund der kompletten Tabelle sind hier wirkungslos. Zum Vergleich darunter eine Wikitable mit identischen Farbanweisungen.

class="mw-datatable"

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

Farben bei class="wikitable"

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:[3]

{| class="mw-datatable hintergrundfarbe3"
|- style="background:#ABCDEF;"
! Kopfzelle !! style="background:#FEDCBA"| Kopfzelle !! Kopfzelle
|-
|class="hintergrundfarbe4"| Zelle 1 || Zelle 2 || Zelle 3
|- style="background:#ABCDEF;"
| Zelle 4 || Zelle 5 || Zelle 6
|-
|style="background:#FFBBAA"| Zelle 7 ||style="background:#AABBCC"| Zelle 8 ||style="background:#ABCDEF"| Zelle 9
|-
|style="background:#FFFFFF"| Zelle 10 ||style="background:#FFFFFF"| Zelle 11 ||style="background:#FFFFFF"| Zelle 12
|}

Sortierung

 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

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

Falls das Farbangebot der Klassenzuweisung nicht ausreicht, kann die Überschrift auch mit einer beliebigen Hintergrundfarbe versehen werden.

  • Dabei muss jedoch darauf geachtet werden, dass jeder einzelnen Zelle der Kopfzeile dieser Farbwert über ein style-Attribut zugewiesen werden muss und dass bei sortierbaren Tabellen (class="wikitable" oder class="mw-collapsible) style="background-color:#RRGGBB" verwendet werden muss, damit durch die Style-Zuweisung nicht versehentlich die Sortierpfeile deaktiviert werden.

! style="background-color:#RRGGBB;"|

Vorname Name Größe
John Smith 1,85
Ron Ray 1,89
Mario Bianchi 1,72
Durchschnitt: 1,82

! style="background:#RRGGBB;"| ohne Pfeile

Vorname Name Größe
John Smith 1,85
Ron Ray 1,89
Mario Bianchi 1,72
Durchschnitt: 1,82

Quelltext dieser Tabelle:

{| class="wikitable sortable"
|-
!style="background-color:#6B8E23"| Vorname
!style="background-color:#6B8E23"| Name
!style="background-color:#6B8E23"| Größe
|-
| John || Smith || 1,85
|-
| Ron || Ray || 1,89
|-
| Mario || Bianchi || 1,72
|-
!colspan="2"| Durchschnitt: !! 1,82
|}

Klappfunktion

 Info: Inhalte sollten in Artikeln generell nicht verborgen werden. Technisch lässt sich ein Inhalt eingeklappen.

  • 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

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 Nein

Weitere Informationen

Anmerkungen

  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".
  2. Farbanweisungen sind bei der Verwendung mit class="mw-datatable" wirkungslos.
Original: Original:

https://de.wikipedia.org/wiki/Hilfe:Tabellen/Beispiele