Die Klasse wikitable bewirkt eine vorformatierte Standardtabelle, bei der bereits einige Dekorationen für Rahmen, Farbgebung, Innen- und Außenabstände zugewiesen wurden.

Darauf aufbauend können weitere Eigenschaften konfiguriert werden.

Nicht alle Funktionen, insbesondere die individuelle Gestaltung des Layouts der Tabellen, lassen sich mit dem visuellen Editor umsetzen; er bietet jedoch einige Vorteile, die die Bearbeitung vereinfachen.

Eigenschaften

Bearbeiten

Bei der Bearbeitung des Quelltextes einer Seite ist sie an der Klassenzuweisung {| class="wikitable" am Beginn der Tabelle zu erkennen. Diese bewirkt:

  • Die Tabellenüberschrift ist zentriert und in Fettschrift formatiert (Beispiel).
  • Die Tabelle erhält einen Rahmen um jede einzelne Zelle.
  • Die Inhaltszellen sind hellgrau (Dark Mode schwarzgrau) hinterlegt.
  • Die Kopfzellen sind zentriert, in Fettschrift formatiert und mittelgrau (Dark Mode dunkelgrau) hinterlegt.
  • Alle Zelleninhalte haben einen Mindestabstand zum umgebenden Rahmen.
  • Die komplette Tabelle hat einen definierten Abstand nach oben und unten.
  • Zur alternativen Einfärbung der gesamten Kopfzeile ist nur die Nutzung der Wiki-CSS-Klassen, beispielsweise class="hintergrundfarbe2" sinnvoll möglich. Ansonsten muss jeder Kopfzelle einzeln eine Hintergrund- und Textfarbe oder Textausrichtung zugewiesen werden.

Darstellung einer Standardtabelle

Bearbeiten

  VisualEditor

  • Über Eigenschaften das Menü „Tabelleneigenschaften“ öffnen.
  • Dort „Stilisiert (wikitable)“ →
     0000_ 
    eingeschaltet.

Quelltext

{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}

Aussehen

Tabellenüberschrift
Kopfzellen-Überschrift Kopfzellen-Überschrift
Beispieltext Inhaltszelle 12. Februar 2020
Max Mustermann 3. Juli 1980

Einfache Tabelle

Bearbeiten

Zum Vergleich die Darstellung ohne diese Klassenzuweisung
  VisualEditor

  • Über Eigenschaften das Menü „Tabelleneigenschaften“ öffnen.
  • Dort „Stilisiert (wikitable)“ →
     _0000 
    ausgeschaltet.

Quelltext

{|
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}

Aussehen

Tabellenüberschrift
Kopfzellen-Überschrift Kopfzellen-Überschrift
Beispieltext Inhaltszelle 12. Februar 2020
Max Mustermann 3. Juli 1980

Eigenschaften

  • Die Tabellenüberschrift ist zentriert
  • Die Tabelle hat keinen Rahmen und keine Zellenränder
  • Die Inhaltszellen haben keine Hintergrundfärbung und keinen Abstand (padding)
  • Die Kopfzellen sind zentriert in Fettschrift formatiert

Zusammenspiel mit weiteren Klassen

Bearbeiten

Die Standardtabelle (class="wikitable") lässt sich durch einige Klassen einfach für weitere Optionen erweitern. Für die visuelle Bearbeitung steht ein leicht zu bedienendes Menü zur Verfügung, über das sich einige Eigenschaften hinzufügen oder abschalten lassen.

Hier stehen folgende Optionen zur Auswahl:

Option Auswirkung
Überschrift
 _0000 
Tabelle ohne Tabellenüberschrift ist in den meisten Fällen ausreichend
 0000_ 
Tabelle mit einer Tabellenüberschrift versehen – die Tabelle erhält eine Zeile |+ für die Tabellenüberschrift
Stilisiert (wikitable)
 0000_ 
Standardtabelle Wikitable nutzen; dies erzeugt die hier beschriebene vorformatierte Tabelle – diese Funktion ist zu bevorzugen
 _0000 
einfache rahmenlose Tabelle verwenden
Sortierbar
 _0000 
Keine Sortierung verwenden
 0000_ 
Sortierung aktivieren – die Tabelle wird durch sortable ergänzt – bitte möglichst darauf verzichten
Einklappbar
Beispiele
 _0000 
Einklappfunktion ausgeschaltet
 0000_ 
Tabelle einklappbar gestalten (Bitte nicht in Artikeln einsetzen)

Sortierung hinzuschalten

Bearbeiten

Um aus einer wikitable eine sortierbare Tabelle zu machen, kann diese durch die class="sortable" erweitert werden, dabei sind mehrere Dinge zu beachten.

  1. Die Sortierung setzt voraus, dass die Tabelle über eine Zeile mit Kopfzellen verfügt, die den einzelnen Spalten zugeordnet sind.
  2. Übersichtliche Tabellen mit nur wenigen Zeilen und Spalten sollten nicht als sortierbare Tabellen gestaltet werden.
  3. Sollen die Kopfzellen farbig hervorgehoben werden, so muss dies über eine der Farbklassen class="hintergrundfarbe1" bis class="hintergrundfarbe9" erfolgen, um die Funktion zu gewährleisten. Eine falsche Farbzuweisung kann zum Verlust der Sortierpfeile führen, siehe auch Beispiele.
  4. Die Sortierung ist eine komplexe Angelegenheit. Zu mehr Informationen siehe Hilfe:Tabellen/Sortierung

Hintergrundfarbe

Bearbeiten

Um die Hintergrundfarbe der kompletten Tabelle, ganzer Zeilen oder einzelner Zellen zu ändern kann entweder mit Farbklassen class="hintergrundfarbe1" bis class="hintergrundfarbe9" oder zusätzlichen Stylezuweisungen gearbeitet werden. Bitte Farben nur sparsam verwenden, sie lassen sich nur durch eine Bearbeitung des Wikitextes realisieren.

Hervorhebung durch (zebra) oder (tabelle-zeile-aktiv)

Bearbeiten

Diese Funktion zebra ist speziell für Wikitable gedacht, für eine visuelle Bearbeitung ist sie nicht vorgesehen. Ähnlich verhält sich eine Tabelle, die mit tabelle-zeile-aktiv gekennzeichnet wurde, hier färbt sich jeweils die Zeile hellblau, die mit dem Mauszeiger überfahren wird.

Zugehörige CSS-Definition

Bearbeiten

resources/src/mediawiki.skinning/content.tables.less

Tabelleneigenschaften table Standard heller Seitenhintergrund
.wikitable {
   background-color: #f8f9fa;
   color: #202122;
   margin: 1em 0;
   border: 1px solid #a2a9b1;
   border-collapse: collapse;
}
Hintergrundfarbe #F8F9FA
Schriftfarbe #202122 _
Außenabstand
margin
links 0 – oben/unten/rechts je 1em
Ränder
1px solid #A2A9B1
verbundene Zellen
Tabellenüberschrift |+ = caption
.wikitable > caption {
   font-weight: bold;
}
Hintergrundfarbe ohne Zuweisung (hintergrund-basis #FFFFFF)
Textstil zentriert, fett
Kopfzellen ! = th
.wikitable > tr > th,
.wikitable > * > tr > th {
   background-color: #eaecf0;
   text-align: center;
}
Hintergrundfarbe #EAECF0
Textstil zentriert, fett
Inhaltszellen | = td
.wikitable > tr > td,
.wikitable > * > tr > td {
   border: 1px solid #a2a9b1;
   padding: 0.2em 0.4em;
}
Hintergrundfarbe #F8F9FA
Ränder
1px solid #A2A9B1
Innenabstand
padding
oben/unten 0.2em
links/rechts 0.4em
Dark Mode
Tabelleneigenschaften table Dark Mode dunkler Seitenhintergrund (Gadgets/dewikiDarkmode)
.wikitable {
   background-color: #202122;
   color: #f8f9fa;
   margin: 1em 0;
   border: 1px solid #72777d;
   border-collapse: collapse;
}
Hintergrundfarbe #202122
Schriftfarbe #F8F9FA _
Außenabstand
margin
links 0 – oben/unten/rechts je 1em
Ränder
1px solid #72777D
verbundene Zellen
Tabellenüberschrift |+ = caption
.wikitable > caption {
   font-weight: bold;
}
Hintergrundfarbe ohne Zuweisung
Textstil zentriert, fett
Kopfzellen ! = th
.wikitable > tr > th,
.wikitable > * > tr > th {
   background-color: #27292d;
   text-align: center;
}
Hintergrundfarbe #27292D
Textstil zentriert, fett
Inhaltszellen | = td
.wikitable > tr > td,
.wikitable > * > tr > td {
   border: 1px solid #72777d;
   padding: 0.2em 0.4em;
}
Hintergrundfarbe #202122
Ränder
1px solid #72777D
Innenabstand
padding
oben/unten 0.2em
links/rechts 0.4em

Weitere Informationen

Bearbeiten