Cowboy: Die Seite wurde neu angelegt: „{{Hilfe}} = wikitable = 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 m…“

2025-05-10T22:31:43Z

Die Seite wurde neu angelegt: „<noinclude>{{Hilfe}}</noinclude><includeonly> = wikitable = </includeonly> 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 m…“

Neue Seite

<noinclude>{{Hilfe}}</noinclude><includeonly>
= wikitable =
</includeonly>
Die [[Hilfe:CSS#Klassen und Stile|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 [[Hilfe:VisualEditor|visuellen Editor]] umsetzen; er bietet jedoch einige Vorteile, die die Bearbeitung vereinfachen.

== Eigenschaften ==
Bei der Bearbeitung des [[Wikitext|Quelltextes]] einer Seite ist sie an der Klassenzuweisung <code style="white-space:nowrap">{| class="wikitable"</code> am Beginn der Tabelle zu erkennen.
Diese bewirkt:
* Die Tabellenüberschrift ist zentriert und in '''Fettschrift''' formatiert ([[#header|Beispiel]]).
* Die Tabelle erhält einen Rahmen um jede einzelne Zelle.
* Die Inhaltszellen sind {{Farbe|#{{Standardfarbe|hintergrund|1}}|color=#{{Standardfarbe|text|body}}|Text=hellgrau}} (Dark Mode {{Farbe|#{{Standardfarbe|hintergrund|1|mode=dark}}|color=#{{Standardfarbe|text|body|mode=dark}}|Text=schwarzgrau}}) hinterlegt.
* Die Kopfzellen sind zentriert, in '''Fettschrift''' formatiert und {{Farbe|#{{Standardfarbe|hintergrund|5}}|color=#{{Standardfarbe|text|body}}|Text=mittelgrau}} (Dark Mode {{Farbe|#{{Standardfarbe|hintergrund|5|mode=dark}}|color=#{{Standardfarbe|text|body|mode=dark}}|Text=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 [[Hilfe:Farbe#Hintergrundfarben|Wiki-CSS-Klassen]], beispielsweise <code>class="hintergrundfarbe2"</code> sinnvoll möglich. Ansonsten muss jeder Kopfzelle einzeln eine Hintergrund- und Textfarbe oder Textausrichtung zugewiesen werden.

=== Darstellung einer Standardtabelle ===
[[Datei:OOjs UI icon eye-progressive.svg|16px|alt=|visueller Editor|verweis=]] [[Hilfe:Tabellen/VisualEditor|VisualEditor]]
* Über {{Hilfe/mark|Eigenschaften|hellblau|Weitere Optionen öffnen|box=1}} das Menü „Tabelleneigenschaften“ öffnen.
* Dort „{{int:visualeditor-dialog-table-wikitable}}“ → {{Hilfe/switchbutton|on}} eingeschaltet.

<div style="float:left; margin-right:2em;">
'''Quelltext'''
<syntaxhighlight lang="wikitext" highlight="1" copy="1">
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
</syntaxhighlight>
</div><div style="float:left;">
'''Aussehen'''
{| class="wikitable"
|+ id="header"| Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
</div>
<div style="clear:left;"></div>

=== Einfache Tabelle ===
Zum Vergleich die Darstellung ohne diese Klassenzuweisung<br />
[[Datei:OOjs UI icon eye-progressive.svg|16px|alt=|visueller Editor|verweis=]] [[Hilfe:Tabellen/VisualEditor|VisualEditor]]
* Über {{Hilfe/mark|Eigenschaften|hellblau|Weitere Optionen öffnen|box=1}} das Menü „Tabelleneigenschaften“ öffnen.
* Dort „{{int:visualeditor-dialog-table-wikitable}}“ → {{Hilfe/switchbutton}} ausgeschaltet.
<div style="float:left; margin-right:2em;">
'''Quelltext'''
<syntaxhighlight lang="wikitext" highlight="1">
{|
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
</syntaxhighlight>
</div><div style="float:left;">
'''Aussehen'''
{|
|+ Tabellenüberschrift
|-
! Kopfzellen-Überschrift !! Kopfzellen-Überschrift
|-
| Beispieltext Inhaltszelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|}
</div>
<div style="clear:left;"></div>

'''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 ==
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.
{{Siehe auch|Hilfe:Tabellen/VisualEditor #Tabelle erstellen}}
Hier stehen folgende Optionen zur Auswahl:
{| class="wikitable toptextcells"
|-
!colspan="2"| Option !! Auswirkung
|-
|rowspan="2"| {{int:visualeditor-dialog-table-caption}} ||style="white-space:nowrap"| {{Hilfe/switchbutton}} || Tabelle ohne Tabellenüberschrift ist in den meisten Fällen ausreichend
|-
| {{Hilfe/switchbutton|on}} || Tabelle mit einer Tabellenüberschrift versehen – die Tabelle erhält eine Zeile <code>|+</code> für die Tabellenüberschrift
|-
|rowspan="2"| {{int:visualeditor-dialog-table-wikitable}} || {{Hilfe/switchbutton|on}} || Standardtabelle Wikitable nutzen; dies erzeugt die hier beschriebene vorformatierte Tabelle – diese Funktion ist zu bevorzugen
|-
| {{Hilfe/switchbutton}} || einfache rahmenlose Tabelle verwenden
|-
|rowspan="2"| {{int:visualeditor-dialog-table-sortable}} || {{Hilfe/switchbutton}} || Keine Sortierung verwenden
|-
| {{Hilfe/switchbutton|on}} || Sortierung aktivieren – die Tabelle wird durch <code>sortable</code> ergänzt – bitte möglichst darauf verzichten
|-
|rowspan="2"| {{int:visualeditor-dialog-table-collapsible}}<br />[[Hilfe:Tabellen/Beispiele#mw-collapsible|Beispiele]] || {{Hilfe/switchbutton}} || Einklappfunktion ausgeschaltet
|-
| {{Hilfe/switchbutton|on}} || Tabelle einklappbar gestalten (Bitte nicht in Artikeln einsetzen)
|}

=== Sortierung hinzuschalten ===
Um aus einer ''wikitable'' eine sortierbare Tabelle zu machen, kann diese durch die <code>class="sortable"</code> erweitert werden, dabei sind mehrere Dinge zu beachten.
# Die Sortierung setzt voraus, dass die Tabelle über eine [[Hilfe:Tabellen/Wikisyntax#Kopfzeile|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 <code>class="hintergrundfarbe1"</code> bis <code>class="hintergrundfarbe9"</code> erfolgen, um die Funktion zu gewährleisten. Eine falsche Farbzuweisung kann zum Verlust der Sortierpfeile führen, siehe auch [[Hilfe:Tabellen/Beispiele#Sortierung|Beispiele]].
# Die Sortierung ist eine komplexe Angelegenheit. Zu mehr Informationen siehe [[Hilfe:Tabellen/Sortierung]]

=== Hintergrundfarbe ===
Um die Hintergrundfarbe der kompletten Tabelle, ganzer Zeilen oder einzelner Zellen zu ändern kann entweder mit Farbklassen <code>class="hintergrundfarbe1"</code> bis <code>class="hintergrundfarbe9"</code> 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) ===
Diese Funktion <code>zebra</code> ist speziell für Wikitable gedacht, für eine visuelle Bearbeitung ist sie nicht vorgesehen. Ähnlich verhält sich eine Tabelle, die mit <code>tabelle-zeile-aktiv</code> gekennzeichnet wurde, hier färbt sich jeweils die Zeile hellblau, die mit dem Mauszeiger überfahren wird.
* <code>zebra</code>
** [[../Erweitert#zebra|Details]]
** [[../Beispiele#zebra|Beispiel für die Anzeige]]
* <code>tabelle-zeile-aktiv</code>
** [[../Erweitert#tabelle-zeile-aktiv|Details]]
** [[../Beispiele#tabelle-zeile-aktiv|Beispiel für die Anzeige]]

== Zugehörige CSS-Definition ==
{{Phab|file=resources/src/mediawiki.skinning/content.tables.less}}
{| class="wikitable"
|- class="hintergrundfarbe9"
|colspan="3"| Tabelleneigenschaften <code>table</code> Standard heller Seitenhintergrund
|-
|rowspan="5" style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| <syntaxhighlight lang="css">
.wikitable {
background-color: #f8f9fa;
color: #202122;
margin: 1em 0;
border: 1px solid #a2a9b1;
border-collapse: collapse;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| #{{Standardfarbe|hintergrund|1|ucase=1}}
|-
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| Schriftfarbe ||style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| #{{Standardfarbe|text|body|ucase=1}} {{Farbe|#{{Standardfarbe|text|body}} |width=30px|height=12px}}
|-
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| Außenabstand<br /><code>margin</code> ||style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| links 0 – oben/unten/rechts je 1em
|-
|rowspan="2" style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| Ränder ||style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| <div style="border: 1px solid #{{Standardfarbe|rahmen|1}};">1px solid #{{Standardfarbe|rahmen|1|ucase=1}}</div>
|-
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| verbundene Zellen
|- class="hintergrundfarbe9"
|colspan="3"| Tabellenüberschrift <code>|+</code> = <code>caption</code>
|-
|rowspan="2" style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <syntaxhighlight lang="css">
.wikitable > caption {
font-weight: bold;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| ohne Zuweisung (hintergrund-basis #{{Standardfarbe|hintergrund|basis|ucase=1}})
|-
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| Textstil ||style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}}; text-align:center;"| zentriert, <span style="font-weight: bold;">fett</span>
|- class="hintergrundfarbe9"
|colspan="3"| Kopfzellen <code>!</code> = <code>th</code>
|-
|rowspan="2" style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}};"| <syntaxhighlight lang="css">
.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: #eaecf0;
text-align: center;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}};"| #{{Standardfarbe|hintergrund|5|ucase=1}}
|-
|style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}};"| Textstil ||style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}}; text-align:center;"| zentriert, <span style="font-weight: bold;">fett</span>
|- class="hintergrundfarbe9"
|colspan="3"| Inhaltszellen <code>|</code> = <code>td</code>
|-
|rowspan="3" style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| <syntaxhighlight lang="css">
.wikitable > tr > td,
.wikitable > * > tr > td {
border: 1px solid #a2a9b1;
padding: 0.2em 0.4em;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| #{{Standardfarbe|hintergrund|1|ucase=1}}
|-
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| Ränder ||style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| <div style="border: 1px solid #A2A9B1;">1px solid #A2A9B1</div>
|-
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| Innenabstand<br /><code>padding</code> ||style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}}; text-align:center;"| oben/unten 0.2em<br />links/rechts 0.4em
|}

;{{Anker|dark}} Dark Mode
{| class="wikitable"
|- class="hintergrundfarbe9"
|colspan="3"| Tabelleneigenschaften <code>table</code> [[CowboysWiki:Dark Mode|Dark Mode]] dunkler Seitenhintergrund ([[CowboysWiki:Technik/Skin/Gadgets/dewikiDarkmode|Gadgets/dewikiDarkmode]])
|-
|rowspan="5" style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <syntaxhighlight lang="css">
.wikitable {
background-color: #202122;
color: #f8f9fa;
margin: 1em 0;
border: 1px solid #72777d;
border-collapse: collapse;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| #{{Standardfarbe|hintergrund|1|ucase=1|mode=dark}}
|-
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Schriftfarbe ||style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| #{{Standardfarbe|text|body|ucase=1|mode=dark}} {{Farbe|#{{Standardfarbe|text|body|mode=dark}} |width=30px|height=12px}}
|-
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Außenabstand<br /><code>margin</code> ||style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| links 0 – oben/unten/rechts je 1em
|-
|rowspan="2" style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Ränder ||style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <div style="border: 1px solid #{{Standardfarbe|rahmen|1|mode=dark}};">1px solid #{{Standardfarbe|rahmen|1|ucase=1|mode=dark}}</div>
|-
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| verbundene Zellen
|- class="hintergrundfarbe9"
|colspan="3"| Tabellenüberschrift <code>|+</code> = <code>caption</code>
|-
|rowspan="2" style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <syntaxhighlight lang="css">
.wikitable > caption {
font-weight: bold;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| ohne Zuweisung
|-
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Textstil ||style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}; text-align:center;"| zentriert, <span style="font-weight: bold;">fett</span>
|- class="hintergrundfarbe9"
|colspan="3"| Kopfzellen <code>!</code> = <code>th</code>
|-
|rowspan="2" style="background:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <syntaxhighlight lang="css">
.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: #27292d;
text-align: center;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| #{{Standardfarbe|hintergrund|5|ucase=1|mode=dark}}
|-
| style="background:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Textstil ||style="background:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}; text-align:center;"| zentriert, <span style="font-weight: bold;">fett</span>
|- class="hintergrundfarbe9"
|colspan="3"| Inhaltszellen <code>|</code> = <code>td</code>
|-
|rowspan="3" style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <syntaxhighlight lang="css">
.wikitable > tr > td,
.wikitable > * > tr > td {
border: 1px solid #72777d;
padding: 0.2em 0.4em;
}
</syntaxhighlight>
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Hintergrundfarbe ||style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| #{{Standardfarbe|hintergrund|1|ucase=1|mode=dark}}
|-
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Ränder ||style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <div style="border: 1px solid #{{Standardfarbe|rahmen|1|mode=dark}};">1px solid #{{Standardfarbe|rahmen|1|ucase=1|mode=dark}}</div>
|-
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Innenabstand<br /><code>padding</code> ||style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}; text-align:center;"| oben/unten 0.2em<br />links/rechts 0.4em
|}

== Weitere Informationen ==
* [[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
<noinclude>
[[Kategorie:Hilfe:Listen und Tabellen]]
[[Kategorie:Hilfe:Wikisyntax]]
</noinclude>

Hilfe:Tabellen/wikitable - Versionsgeschichte