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
BearbeitenBei 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- Über Eigenschaften das Menü „Tabelleneigenschaften“ öffnen.
- Dort „Stilisiert (wikitable)“ → eingeschaltet.
Quelltext
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
Aussehen
Kopfzellen-Überschrift | Kopfzellen-Überschrift |
---|---|
Beispieltext Inhaltszelle | 12. Februar 2020 |
Max Mustermann | 3. Juli 1980 |
Einfache Tabelle
BearbeitenZum Vergleich die Darstellung ohne diese Klassenzuweisung
VisualEditor
- Über Eigenschaften das Menü „Tabelleneigenschaften“ öffnen.
- Dort „Stilisiert (wikitable)“ → ausgeschaltet.
Quelltext
{|
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
Aussehen
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
BearbeitenDie 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 | Tabelle ohne Tabellenüberschrift ist in den meisten Fällen ausreichend | |
Tabelle mit einer Tabellenüberschrift versehen – die Tabelle erhält eine Zeile |+ für die Tabellenüberschrift
| ||
Stilisiert (wikitable) | Standardtabelle Wikitable nutzen; dies erzeugt die hier beschriebene vorformatierte Tabelle – diese Funktion ist zu bevorzugen | |
einfache rahmenlose Tabelle verwenden | ||
Sortierbar | Keine Sortierung verwenden | |
Sortierung aktivieren – die Tabelle wird durch sortable ergänzt – bitte möglichst darauf verzichten
| ||
Einklappbar Beispiele |
Einklappfunktion ausgeschaltet | |
Tabelle einklappbar gestalten (Bitte nicht in Artikeln einsetzen) |
Sortierung hinzuschalten
BearbeitenUm aus einer wikitable eine sortierbare Tabelle zu machen, kann diese durch die class="sortable"
erweitert werden, dabei sind mehrere Dinge zu beachten.
- Die Sortierung setzt voraus, dass die Tabelle über eine Zeile mit Kopfzellen verfügt, die den einzelnen Spalten zugeordnet sind.
- Übersichtliche Tabellen mit nur wenigen Zeilen und Spalten sollten nicht als sortierbare Tabellen gestaltet werden.
- Sollen die Kopfzellen farbig hervorgehoben werden, so muss dies über eine der Farbklassen
class="hintergrundfarbe1"
bisclass="hintergrundfarbe9"
erfolgen, um die Funktion zu gewährleisten. Eine falsche Farbzuweisung kann zum Verlust der Sortierpfeile führen, siehe auch Beispiele. - Die Sortierung ist eine komplexe Angelegenheit. Zu mehr Informationen siehe Hilfe:Tabellen/Sortierung
Hintergrundfarbe
BearbeitenUm 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.
- Siehe auch Hilfe:Farbe und Hilfe:Textgestaltung/Barrierefreiheit
- Hilfe:Tabellen/Beispiele #Dekoration
- Hilfe:VisualEditor/Wikitext für die Umschaltung
Hervorhebung durch (zebra) oder (tabelle-zeile-aktiv)
BearbeitenDiese 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.
zebra
tabelle-zeile-aktiv
Zugehörige CSS-Definition
Bearbeitenresources/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ßenabstandmargin |
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
| |
Innenabstandpadding |
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ßenabstandmargin |
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
| |
Innenabstandpadding |
oben/unten 0.2em links/rechts 0.4em |
Weitere Informationen
Bearbeiten- Hilfe:Tabellen – Grundlagen, einfache Tabellen
- Hilfe:Tabellen/VisualEditor – Tabellen in der visuellen Bearbeitung
- Hilfe:Tabellen für Fortgeschrittene – erweiterte Gestaltungsmöglichkeiten
- Hilfe:Tabellen/Sortierung – Spezialfunktion für sortierbare Tabellen
- Hilfe:Tabellen/Beispiele – Beispiele für die Verwendung