Quelltext der Seite Hilfe:Tabellen/Beispiele

{{Hilfe}}
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 [[Wikitext|Quelltext]] nachgestellt.

== Grundlagen ==
{{Hauptseite|Hilfe:Tabellen|Hilfe:Tabellen/Wikisyntax}}
Um eine Tabelle zu erstellen können, je nachdem welches Bearbeitungswerkzeug verwendet wird, Hilfsmittel genutzt werden, die eine Grundstruktur erstellen.
; [[Datei:OOjs UI icon eye-progressive.svg|16px|alt=|visueller Editor|verweis=H:Tabellen/VisualEditor]] Visuelle Bearbeitung
: Im Menüpunkt {{Hilfe:VisualEditor/!toolitem|InsertAll}} kann über den Unterpunkt <code>{{Hilfe:VisualEditor/!toolitem|Tabelle|name=1}}</code> eine zunächst leere Tabelle mit vier Zeilen, vier Spalten und einem zugehörigen Tabellenmenü erzeugt werden.<br />Siehe [[Hilfe:Tabellen/VisualEditor#Einfache Tabellen]]
; [[Datei:OOjs UI icon wikiText.svg|16px|verweis=]] [[Hilfe:Wikisyntax|Quelltextbearbeitung]]
: [[Hilfe:Skin#Unterschiedliche Skins|Vector-Skin]]: Ein identisches Symbol [[Datei:OOjs UI icon table.svg|16px|verweis=]] befindet sich in den erweiterten Optionen der [[Hilfe:Symbolleisten#Erweiterte Bearbeitungswerkzeugleiste|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.
{{Hilfe/mobil|mitText=0}} Für [[Mobilgerät]]e ist keine derartige Erstellungshilfe vorhanden.

== {{Anker|einfach}} Einfache Tabellen ==
Ohne jegliche Zuweisung ([[#CSS.class|Klassen]], Styles oder Tabellenattribute) ist eine Tabelle zunächst transparent, lediglich die Formatierung unter- oder nebeneinander liegender Inhalte wird umgesetzt ([[Hilfe:Tabellen #einfach]]).

=== {{Anker|Rahmen}} Zellenränder ===
Um die Tabelle auf einfache Art mit einem Rahmen und unterteilten Zellen zu strukturieren bietet sich insbesondere die Verwendung des [[#CSS.class|Klasse <code>wikitable</code>]] an.

Es gibt weitere Möglichkeiten einer Tabelle oder einzelnen Zeilen einen Rand (Rahmen) zuzuweisen.
{{Siehe auch|Hilfe:Tabellen für Fortgeschrittene#style.border|titel1=Rahmen und Zellenränder}}

==== Ränder durch wikitable ====
<div style="float:left; margin-right:4em;">
Zeilen
{| class="wikitable"
|-
| Zelle 1
|-
| Zelle 2
|-
| Zelle 3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| class="wikitable"
|-
| Zelle 1
|-
| Zelle 2
|-
| Zelle 3
|}
</pre>
</div>
<div style="clear:left;"></div>

<div style="float:left; margin-right:4em;">
Spalten
{| class="wikitable"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| class="wikitable"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
</pre>
</div><div style="float:left;">
Spalten alternativ
<pre style="white-space: pre nowrap">
{| class="wikitable"
|-
| Zelle 1 || Zelle 2 || Zelle 3
|}
</pre>
</div>
<div style="clear:left;"></div>
<div style="float:left; margin-right:4em;">
Zeilen und Spalten
{| class="wikitable"
|-
| Zelle 1/1
| Zelle 2/1
|-
| Zelle 1/2
| Zelle 2/2
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| class="wikitable"
|-
| Zelle 1/1
| Zelle 2/1
|-
| Zelle 1/2
| Zelle 2/2
|}
</pre>
</div><div style="float:left;">
Spalten und Zeilen alternativ
<pre style="white-space: pre nowrap">
{| class="wikitable"
|-
| Zelle 1/1 || Zelle 2/1
|-
| Zelle 1/2 || Zelle 2/2
|}
</pre>
</div>
<div style="clear:left;"></div>

Für manche Tabellenfunktion ist es erforderlich, dass oben eine Kopfzeile vorhanden ist, dies gilt insbesondere für die [[Hilfe:Tabellen/Sortierung|Sortierung]].

==== Randeigenschaften ändern ====
Es kann vorkommen, dass einzelne Zeilen mit einer durchgehenden, verstärkten oder farblich abgesetzten Trennlinie versehen werden sollen. Das kann über <code>style="border:…;"</code> verwirklicht werden. Dabei ist zu beachten, dass bei der Verwendung von <code>class="wikitable"</code> einem Rand mindestens eine Dicke von <code>2px</code> zugewiesen werden muss.

* <code>style="border-style:…;"</code> – Art der Randlinien siehe [[Hilfe:Tabellen für Fortgeschrittene#border-style|Rahmenarten]]

Border kann gemeinsam oder auf jeden Rand einzeln wirken. – Attribute: (Reihenfolge bei mehreren Werten: oben, rechts, unten, links)
* <code>style="border-color:…;"</code> – kann bis zu vier Farbwerte haben, benötigt zusätzlich eine Angabe für <code style="white-space:nowrap">border-width:…;</code>
* <code>style="border-width:…;"</code> – kann bis zu vier Breitenwerte haben.
<div style="float:left; margin-right:4em;">
Ränder unterschiedlich färben
{| class="wikitable" style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width: 3px;"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
unterschiedlich dick
{| class="wikitable" style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width: 2px 5px 2px 5px;;"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
Werte getauscht
{| class="wikitable" style="border-color: #DD00DD #DD0000 #00DD00 #000DD0; border-width: 5px 2px 5px 2px;;"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| class="wikitable" style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width:3px;"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
</pre>
</div><div style="float:left;">
<pre style="white-space: pre nowrap">
{| class="wikitable" style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width:2px 5px 2px 5px;;"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
</pre>
</div>
<div style="clear:left;"></div>

für eine Zelle <code>|style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width:3px;"| Zelle 2</code>
{| class="wikitable"
|-
| Zelle 1
|style="border-color: #DD0000 #00DD00 #000DD0 #DD00DD; border-width:3px;"| Zelle 2
| Zelle 3
|}

==== Zeilenweise ====
Um eine Zeile mit einer Linie oben oder unten darzustellen können die Eigenschaften über
* <code>style="border-top:…;"</code> – Randeigenschaften oben
* <code>style="border-bottom:…;"</code> – Randeigenschaften unten
zugewiesen werden. Für Wikitables sollte der Wert auch hier mindestens <code>2px</code> betragen, um den Effekt sichtbar zu machen.
<div style="float:left; margin-right:4em;">
<code>|- style="border-bottom: 2px solid;"</code>
{| 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
|}
<code>|- style="border-top: 2px solid;"</code>
{| class="wikitable"
|- style="border-top: 2px solid;"
| Zelle 1
| Zelle 2
| Zelle 3
|- style="border-top: 2px solid;"
| Zelle 1
| Zelle 2
| Zelle 3
|- style="border-top: 2px solid;"
| Zelle 1
| Zelle 2
| Zelle 3
|}
<code>|- style="border-bottom: 2px solid; border-top: 2px solid;"</code><br />Rand oben und unten in Zeile 2 verstärken
{| class="wikitable"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|- style="border-bottom:2px solid; border-top: 2px solid;"
| Zelle 1
| Zelle 2
| Zelle 3
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>
Diese Funktion kann auch dazu genutzt werden, um den Zeilenrand oben oder unten auszublenden.
<div style="float:left; margin-right:4em;">
<code>|- style="border-bottom: hidden;"</code>
<br />Rand unten in Zeile 1 und 2 ausblenden
{| 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
|}
<code>|- style="border-bottom: hidden; border-top: hidden;"</code><br />Rand oben und unten in Zeile 2 ausblenden
{| class="wikitable"
|-
| Zelle 1
| Zelle 2
| Zelle 3
|- style="border-bottom: hidden; border-top: hidden;"
| Zelle 1
| Zelle 2
| Zelle 3
|-
| Zelle 1
| Zelle 2
| Zelle 3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

==== Spaltenweise ====
Um eine Spalte mit einer Linie links oder rechts darzustellen können die Eigenschaften über
* <code>style="border-left:…;"</code> – Randeigenschaften links
* <code>style="border-right:…;"</code> – Randeigenschaften rechts
zugewiesen werden. Für Wikitables sollte der Wert auch hier mindestens <code>2px</code> betragen, um den Effekt sichtbar zu machen.

<div style="float:left; margin-right:4em;">
<code>|style="border-right: 2px solid;"|</code><br /><code>|style="border-left: 2px solid;"|</code>
{| 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
|-
|style="border-right: 2px solid;"| Zelle 1
|style="border-right: 2px solid;"| Zelle 2
| Zelle 3
|}
<code>|style="border-right: 2px solid; border-left: 2px solid;"|</code><br />in der mittleren Spalte
{| class="wikitable"
|-
| Zelle 1
|style="border-right: 2px solid; border-left: 2px solid;"| Zelle 2
| Zelle 3
|-
| Zelle 1
|style="border-right: 2px solid; border-left: 2px solid;"| Zelle 2
| Zelle 3
|-
| Zelle 1
|style="border-right: 2px solid; border-left: 2px solid;"| Zelle 2
| Zelle 3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

Diese Funktion kann auch dazu genutzt werden, um einen Spaltenrand links oder rechts auszublenden.
<div style="float:left; margin-right:4em;">
<code>|style="border-right: hidden;"|</code><br /><code>|style="border-left: hidden;"|</code>
{| 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
|-
|style="border-right: hidden;"| Zelle 1
|style="border-right: hidden;"| Zelle 2
| Zelle 3
|}
<code>|style="border-right: hidden; border-left: hidden;"|</code><br />in der mittleren Spalte
{| class="wikitable"
|-
| Zelle 1
|style="border-right: hidden; border-left: hidden;"| Zelle 2
| Zelle 3
|-
| Zelle 1
|style="border-right: hidden; border-left: hidden;"| Zelle 2
| Zelle 3
|-
| Zelle 1
|style="border-right: hidden; border-left: hidden;"| Zelle 2
| Zelle 3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

==== Ecken abrunden ====
Es ist technisch möglich den Rahmen einer Tabelle mit abgerundeten Ecken zu präsentieren. Dies ist allerdings für <code>class="wikitable"</code> nicht vorgesehen und sollte auch nicht in Artikeln eingesetzt werden.
* <code>style="border-radius:…;"</code> – erfordert eine weitere Zuweisung border-<code>style, width, color</code> oder eine Hintergrund- beziehungsweise eine [[Hilfe:Farbe#Rahmenfarben|Rahmenfarbe]].
* <code>style="border-top-right-radius: …; border-top-left-radius: …; border-bottom-right-radius: …; border-bottom-left-radius: …;"</code>

<code>{| class="hintergrundfarbe8" style="border: 2px solid #999999; border-radius: .5em;"</code>
{| 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
|}
<code>{| class="hintergrundfarbe7&nbsp;rahmenfarbe3" style="border-style: solid; border-width: 2px; border-radius: .3em;"</code>
{| 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
|}

=== {{Anker|caption}} Überschriften ===
Eine komplette Tabelle kann mit einer Überschrift <code>|+</code> versehen werden. Diese ist standardmäßig zentriert ausgerichtet.<ref name="Mobil-links">{{Hilfe/mobil|mitText=0}} Auf Mobilgeräten steht die Tabellenüberschrift linksbündig.</ref> Je nach verwendeter [[#CSS.class|CSS-Klasse]] kann diese Überschrift auch '''fett''' formatiert sein.
<div style="float:left; margin-right:4em;">
Einfache Tabelle
{|
|+ Text der Überschrift
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
mit <code>class="wikitable"</code>
{| class="wikitable"
|+ Text der Überschrift
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="html" highlight="2">
{|
|+ Text der Überschrift
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

==== 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 <code>class="wikitable"</code>)

<div style="float:left; margin-right:4em;">
{| class="wikitable"
|+ style="text-align:left;"| Überschrift linksbündig
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' für die Zeile:
<pre style="white-space: pre nowrap">
|+ style="text-align:left;"| …
</pre>
</div>
<div style="clear:left;"></div>
<div style="float:left; margin-right:4em;">
{| class="wikitable"
|+ style="text-align:right;"| Überschrift rechtsbündig
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' für die Zeile:
<pre style="white-space: pre nowrap">
|+ style="text-align:right;"| …
</pre>
</div>
<div style="clear:left;"></div>

<div style="float:left; margin-right:4em;">
{| class="wikitable"
|+ style="margin-bottom:1em;"| Überschrift mit Abstand
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' für die Zeile:
<pre style="white-space: pre nowrap">
|+ style="margin-bottom:1em;"| …
</pre>
</div>
<div style="clear:left;"></div>

<div style="float:left; margin-right:4em;">
{| class="wikitable"
|+ style="margin-bottom:1em; border-bottom:1px solid #999999;"| Abstand und Randlinie unten
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' für die Zeile:
<pre style="white-space: pre nowrap">
|+ style="margin-bottom:1em; border-bottom:1px solid #999999;"| …
</pre>
</div>
<div style="clear:left;"></div>

<div style="float:left; margin-right:4em;">
{| class="wikitable"
|+ style="border:1px solid #555555;"| Überschrift mit Rahmen
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' für die Zeile:
<pre style="white-space: pre nowrap">
|+ style="border:1px solid #555555;"| …
</pre>
</div>
<div style="clear:left;"></div>

<div style="float:left; margin-right:4em;">
{| class="wikitable"
|+ class="hintergrundfarbe4" style="border:1px solid #555555;"| Überschrift mit Rahmen und Hintergrundfarbe
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' für die Zeile:
<pre style="white-space: pre nowrap">
|+ class="hintergrundfarbe4" style="border:1px solid #555555;"| …
</pre>
</div>
<div style="clear:left;"></div>

<div style="float:left; margin-right:4em;">
{| class="wikitable"
|+ style="border:1px solid #555555; background:#ABCDEF;"| Überschrift mit Rahmen und Hintergrundfarbe
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' für die Zeile:
<pre style="white-space: pre nowrap">
|+ style="border:1px solid #555555; background:#ABCDEF;"| …
</pre>
</div>
<div style="clear:left;"></div>

==== Position der Überschrift ändern ====
Der zentralen Tabellenüberschrift kann durch das Style-Attribut <code>style="caption-side:…;"</code> eine abweichende Position zugewiesen werden.
* In Artikeln sollten Überschriften nicht neben Tabellen positioniert werden.

<div style="float:left; margin-right:4em;">
<code>|+ style="caption-side:bottom;"| …</code>
{| class="wikitable"
|+ style="caption-side:bottom;"| Überschrift unten setzen
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:<ref name="Mobil-links" />
<syntaxhighlight lang="html" highlight="2">
{| class="wikitable"
|+ style="caption-side:bottom;"| Überschrift unten setzen
|-
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

<div style="float:left; margin-right:4em;">
<code>|+ style="caption-side:right; margin-left:.5em;"| …</code>
{| class="wikitable"
|+ style="caption-side:right; margin-left:.5em;"| Überschrift rechts
|-
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|}
<code>|+ style="caption-side:left; margin-right:.5em;"| …</code>
{| class="wikitable"
|+ style="caption-side:left; margin-right:.5em;"| Überschrift links
|-
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|}
</div><div style="float:left;">
'''Quelltext''' der Tabelle: (Überschrift rechts)
<syntaxhighlight lang="html" highlight="2">
{| class="wikitable"
|+ style="caption-side:right; margin-left:.5em;"| Überschrift rechts
|-
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

=== {{Anker|headline}} Kopfzellen ===
Kopfzellen <code>!</code> 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.
<div style="float:left; margin-right:4em;">
<code>! !!</code>
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="html" highlight="4,8,12,20">
{| 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
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

=== {{Anker|body}} Inhaltszellen ===
Inhaltszellen <code>|</code> enthalten den eigentlichen Inhalt der einzelnen Tabellenzellen. Sie können mit Text, [[Hilfe:Bilder|Bildern]], [[Hilfe:Listen|Listen]], [[Hilfe:Links|Links]], Zahlenwerten, [[Hilfe:Vorlagen|Vorlagen]] … gefüllt werden.

<div style="float:left; margin-right:4em;">
<code>| ||</code>
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="html" highlight="5-13">
{| 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
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

=== {{Anker|scope}} Zellenzuordnung mit scope ===
Das Attribut <code>scope</code> dient dazu einer Zeile <code>scope="row"</code> oder Spalte <code>scope="col"</code> eine bestimmte Überschrift zuzuweisen. So kann auch eine normale Inhaltszelle <code>|</code> als Überschrift einer Zeile deklariert werden. Alle rechts folgenden Zellen dieser Zeile werden dadurch zu dieser in direkten Bezug gesetzt. Das Attribut <code>scope</code> bietet weitere Möglichkeiten der Zuordnung <code>scope="colgroup"</code> (mehrere Spalten) und <code>scope="rowgroup"</code> (mehrere Zeilen) zuordnen.
<div style="float:left; margin-right:4em;">
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="html" highlight="3, 5-8, 10, 15, 20">
{| 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
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

=== 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.
<div style="float:left; margin-right:4em;">
Tabelle in Tabelle
{| class="wikitable"
|-
! Tabelle in Tabelle !! Kopfzelle
|-
|
{| style="width:100%"
|-
| Beispiel || Beispiel
|-
| Beispiel || Beispiel
|}
| Inhaltszelle
|}
wikitable in wikitable
{| class="wikitable"
|-
! Tabelle in Tabelle !! Kopfzelle
|-
|
{| class="wikitable" style="width:100%"
|-
| Beispiel || Beispiel
|-
| Beispiel || Beispiel
|}
| Inhaltszelle
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="html" highlight="5-11">
{| class="wikitable"
|-
! Tabelle in Tabelle !! Kopfzelle
|-
|
{| style="width:100%"
|-
| Beispiel || Beispiel
|-
| Beispiel || Beispiel
|}
| Inhaltszelle
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

== {{Anker|span}} Verbundene Zellen ==
Beispiele für verbundene Tabellenzellen.

[[Datei:OOjs UI icon eye-progressive.svg|16px|alt=|visueller Editor|verweis=]] [[Hilfe:Tabellen/VisualEditor#Tabelle bearbeiten|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. <code>n</code> steht für die Anzahl der Spalten.
<div style="float:left; margin-right:4em;">
<code>|colspan="n"|</code>
{| class="wikitable"
|-
!colspan="6"| Spaltenüberspannende Kopfzeile
|-
| A || B || C || 1 || 2 || 3
|-
|colspan="3"| Buchstaben ||colspan="3"| Zahlenwerte
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| class="wikitable"
|-
!colspan="6"| Spaltenüberspannende Kopfzeile
|-
| A || B || C || 1 || 2 || 3
|-
|colspan="3"| Buchstaben ||colspan="3"| Zahlenwerte
|}
</pre>
</div>
<div style="clear:left;"></div>

=== Übereinander – rowspan ===
Mehrere übereinander liegende Zellen (Zeilen) verbinden. Die Syntax für <code>rowspan</code> ist etwas komplizierter, für den Zeilenumbruch darf der Trenner <code>|-</code> nicht fehlen. Die weiteren Zeilen enthalten den nicht verbundenen Inhalt. <code>n</code> steht für die Anzahl der Zeilen.

<div style="float:left; margin-right:4em;">
<code>|rowspan="n"|</code>
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>
<div style="float:left; margin-right:4em;">
Anderes Beispiel
{| class="wikitable"
|-
|rowspan="3"| führende Spalte
| Zelle 2/1
|rowspan="3"| folgende Spalte
|-
| Zelle 2/2
|-
| Zelle 2/3
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| class="wikitable"
|-
|rowspan="3"| führende Spalte
| Zelle 2/1
|rowspan="3"| folgende Spalte
|-
| Zelle 2/2
|-
| Zelle 2/3
|}
</pre>
</div>
<div style="clear:left;"></div>

=== Über- und Nebeneinander ===
Es können auch Kombinationen vorgenommen werden. <code>n</code> und <code>m</code> stehen für die jeweilige Anzahl.
<div style="float:left; margin-right:4em;">
<code>|colspan="n" rowspan="m"|</code>
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

== 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 <code>%</code> ===
In diesem Beispiel sollen alle vier Spalten gleich breit sein, ihnen wurde also ein Wert von je <code>style="width:25%"</code> zugewiesen; für die letzte Spalte wird der fehlende Wert intern ergänzt.

<div style="float:left; margin-right:4em;">
<code>style="width:25%"</code>
{| class="wikitable"
|-
!style="width:25%"| &nbsp; !! style="width:25%"| !! style="width:25%"| !! 
|-
| &nbsp; || || ||
|}
Alles ok
{| class="wikitable"
|-
!style="width:25%"| X !! style="width:25%"| X !! style="width:25%"| X !! X
|-
| A || B || C || D
|}
Überschrift breiter als 25%
{| class="wikitable"
|-
!style="width:25%"| X !! style="width:25%"| X !! style="width:25%"| X !! XXXXX
|-
| A || B || C || D
|}
Inhalte breiter als 25%
{| class="wikitable"
|-
!style="width:25%"| X !! style="width:25%"| X !! style="width:25%"| X !! X
|-
| AAA || B || CCCC || D
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabellen:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== Breite in <code>em</code> ===
Zum Vergleich wurde hier nun eine Breite von <code>1.5em</code> vorgegeben. Sobald ein Zelleninhalt breiter als <code>1.5em</code> ist wird die gesamte Spalte dadurch so breit wie dieser Inhalt.

<div style="float:left; margin-right:4em;">
<code>style="width:1.5em"|</code>
{| class="wikitable"
|-
!style="width:1.5em"| &nbsp; !! style="width:1.5em"| !! style="width:1.5em"| !! style="width:1.5em"|
|-
| &nbsp; || || ||
|}
Alles ok
{| 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
|}
Überschriften breiter als 1.5em
{| 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
|}
Inhalte breiter als 1.5em
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabellen:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

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

<div style="float:left; margin-right:4em;">
<code>|style="width: xem"|</code>
{| class="wikitable"
|+ Erste Tabelle
|-
! Jahr
! Name
! Anmerkung
|-
|style="width:3em"| 3em
|style="width:7em"| 7em
|style="width:10em"| 10em
|}
{| class="wikitable"
|+ Zweite Tabelle
|-
! Zeit
! Name
! Anmerkung
|-
|style="width:3em"| 1 MZ
|style="width:7em"| Gandalf
|style="width:10em"| Fiktive Person
|}
Zelleninhalt zu lang
{| class="wikitable"
|+ Zweite Tabelle
|-
! Jahr
! Name
! Anmerkung
|-
|style="width:3em"| Erstes Menschenzeitalter
|style="width:7em"| Gandalf
|style="width:10em"| Fiktive Person
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabellen:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

== {{Anker|CSS.class}} 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.

{{Hilfe/mobil|mitText=0}} Nicht alle Klassen werden von der Software für [[Mobilgerät]]e unterstützt, die Beispiele hier beziehen sich auf die klassische Desktopansicht.
{{Hauptseite|Hilfe:Tabellen#CSS.class|titel1=Beschreibung der CSS-Klassen}}

=== Klassenlos ([[Hilfe:Tabellen#Einfache Tabellen|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|wikitable]].
<div style="float:left; margin-right:4em;">
{|
|+ 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{|
|+ 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== wikitable ===
Standardtabelle für dieses Wiki. Sie ist bereits vorformatiert.
<div style="float:left; margin-right:4em;">
<code>{| class="wikitable"</code>
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== zebra ===
Sonderfunktion einer [[#wikitable|wikitable]]. Zebra ist für Tabellen mit Zeilen, die durch <code>rowspan</code> verbunden sind, ungeeignet.
<div style="float:left; margin-right:4em;">
<code>{| class="wikitable zebra"</code>
{| 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
|}
ohne <code>rowspan</code>
{| 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 || ohne Angabe
|-
| Mondmännchen || ohne Angabe
|-
| Saturnmännchen || ohne Angabe
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== <span id="mw-datatable"></span> tabelle-zeile-aktiv ===
Sonderfunktion einer [[#wikitable|wikitable]], bei der die Zeilen beim Überfahren mit der Maus hervorgehoben werden. Dies sollte besser ohne verbundene Zeilen (<code>rowspan</code>) verwendet werden. Um diese Funktion auf einer Seite zu aktivieren wird seit Ende 2021 eine zusätzliche Vorlage {{Vorlage|Tabellenstile}} benötigt, die direkt oberhalb der Tabelle eingebunden werden sollte.
<div style="float:left; margin-right:4em;">
<code>{| class="wikitable tabelle-zeile-aktiv"</code>
{{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
|}
ohne <code>rowspan</code>
{| 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 || ohne Angabe
|-
| Saturnmännchen || ohne Angabe
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{{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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== 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.
<code>{| class="mw-collapsible"</code> besser <code>{| class="wikitable mw-collapsible"</code>
* Attribute <code>mw-collapsed</code> und <code>mw-collapse</code>
<div style="float:left; margin-right:4em;">
<code>class="mw-collapsible"</code>
{| 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
|}
----
<code>class="mw-collapsible mw-collapsed"</code>
{| 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
|}
----
ohne Überschrift oder Kopfzellen
{| class="wikitable mw-collapsible mw-collapse"
|-
| Beispieltext in der ersten Zelle || 12. Februar 2020
|-
| Max Mustermann || 3. Juli 1980
|-
| Marsmännchen ||rowspan="3"| ohne Angabe
|-
| Mondmännchen
|-
| Saturnmännchen
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabellen:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== toptextcells ===
Die Inhalte aller Inhaltszellen werden vertikal am oberen Rand der Zellen ausgerichtet.
<div style="float:left; margin-right:4em;">
<code>{| class="toptextcells"</code>
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

== 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|wikitable]] verwendet. Die Wirkung ist für [[#CSS.class|alle Klassen für Tabellen]] identisch.

{{Hilfe/mobil|mitText=0}} auf [[Mobilgerät]]en werden Tabellen linksbündig dargestellt, die Ausrichtung der gesamten Tabelle im Text ist dort wirkungslos.<br />[[Datei:OOjs UI icon eyeClosed.svg|16px|alt=|visueller Editor|verweis=]] – nicht verfügbar (Stand Mai 2020), alle hier beschriebenen Eigenschaften können nur in der [[Hilfe:VisualEditor/Wikitext|Wikitextbearbeitung]] geändert werden.

{{Hauptseite|Hilfe:Textgestaltung/Layoutfluss}}

=== Standardausrichtung ===
* Die Tabelle steht linksbündig.
* Der Zelleninhalt ist linksbündig und vertikal zentriert.
* Sie wird nicht vom Fließtext umflossen.
* Rechts ausgerichtete [[Hilfe:Bilder#mini|Bilder]] oder Tabellen wie beispielsweise [[Hilfe:Infoboxen|Infoboxen]], können hingegen die Tabelle rechts umfließen, damit keine unnötigen [[Typografischer Weißraum|Weißräume]] entstehen. 

'''Standardausrichtung einer Tabelle'''
<div style="border: 1px #{{Hilfe/style|linec}} dashed; padding:5px; padding-top:0; margin:8px; margin-left:1.em;">
{{Hilfe/Simulation|noframe=1}}
Fließtext über der Tabelle
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br />linksbündig || vertikal zentriert
|}
Fließtext unter der Tabelle
</div>

'''Mit Bild rechts'''
<div style="border: 1px #{{Hilfe/style|linec}} dashed; padding:5px; padding-top:0; margin:8px; margin-left:1.em;">
{{Hilfe/Simulation|noframe=1}}
[[Datei:Feather.svg|mini|hochkant|Schreibfeder]]
Bild und Fließtext über der Tabelle
{| class="wikitable"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br /> linksbündig || vertikal zentriert
|}
Fließtext unter der Tabelle
</div>
'''Quelltext''' der Tabelle:
<pre style="white-space: pre nowrap">
[[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
</pre>

=== Ausrichtung mit Textumfluss ===
Der Textumfluss bei Tabellen sollte nach der gewünschten Umfließung [[Hilfe:Textgestaltung/Layoutfluss#clear|zurückgesetzt]] werden, um unerwünschte Effekte zu vermeiden.
==== Linksbündig mit Textumfluss ====
<div style="float:left; margin-right:4em;">
<code>class="wikitable float-left"</code>

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
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
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
</pre>
</div>
<div style="clear:left;"></div>

==== Rechtsbündig mit Textumfluss ====
<div style="float:left; margin-right:4em;">
<code>class="wikitable float-right"</code>

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
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
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
</pre>
</div>
<div style="clear:left;"></div>

=== Ausrichtung zentriert ===
Je nach verwendeter Klasse <code>class="center"</code> oder <code>class="centered"</code> werden auch die Zelleninhalte beeinflusst.

==== Tabelle normalbreit zentriert ====
<div style="border: 1px #{{Hilfe/style|linec}} dashed; padding:5px; padding-top:0; margin:8px; margin-left:1.em;">
{{Hilfe/Simulation|noframe=1}}
<code>class="centered"</code>

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
</div>

'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
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
</pre>

==== Zentriert über die gesamte Breite ====
Dabei werden auch die Inhaltszellen zentriert gesetzt.
<div style="border: 1px #{{Hilfe/style|linec}} dashed; padding:5px; padding-top:0; margin:8px; margin-left:1.em;">
{{Hilfe/Simulation|noframe=1}}
<code>class="center"</code>

Fließtext über der Tabelle
{| class="wikitable center"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br />zentriert || vertikal zentriert
|}
Fließtext unter der Tabelle
</div>

'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
Fließtext über der Tabelle
{| class="wikitable center"
|+ Tabellenüberschrift
|-
! Kopfzelle !! Kopfzelle
|-
| Inhaltszelle || Inhaltszelle
|-
| Inhalt<br />zentriert || vertikal zentriert
|}
Fließtext unter der Tabelle
|}
</pre>

== Ausrichtung der Zelleninhalte ==
Über [[#CSS.class|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.
{{Hauptseite|Hilfe:CSS#Anordnung des Textes}}
=== 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.
----
<div style="float:left; margin-right:1em;">
'''Syntax:''' <code>style="text-align:left;"</code>
{| 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
|}
Standardverhalten
</div>
<pre style="float:left;">
{| 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
|}
</pre>
<div style="clear:left; float:left; margin-right:1em;">
'''Syntax:''' <code>style="text-align:right;"</code>
{| 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
|}
Textausrichtung rechts
</div>
<syntaxhighlight lang="html" highlight="1" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left; float:left; margin-right:1em;">
'''Syntax:''' <code>style="text-align:center;"</code>
{| 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
|}
Textausrichtung zentriert
</div>
<syntaxhighlight lang="html" highlight="1" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left;"></div>
{{Info}} Ähnelt <code>class="center"</code> jedoch ohne die Ausdehnung auf 100% der Seitenbreite

==== Zeilen horizontal ausrichten ====
Inhaltszellen einer Zeile lassen sich ebenfalls gemeinsam ausrichten.
----
<div style="float:left; margin-right:1em;">
{| 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
|}
</div>
<syntaxhighlight lang="html" highlight="7, 9" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left;"></div>

==== Zellen einzeln horizontal ausrichten ====
Jede Zelle kann einzeln ausgerichtet werden. Dies gilt auch für die Tabellenüberschrift oder Kopfzellen. Auch die Anweisung <code style="white-space:nowrap">style="text-align:left"</code> 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.
----
<div style="clear:left; float:left; margin-right:1em;">
{| 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
|}
Inhaltszelle (Standard linksbündig)
</div>
<syntaxhighlight lang="html" highlight="6,8,10" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left; float:left; margin-right:1em;">
{| 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 (Standard zentriert)
</div>
<syntaxhighlight lang="html" highlight="2" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left; float:left; margin-right:1em;">
{| 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
|}
Kopfzelle (Standard zentriert)
</div>
<syntaxhighlight lang="html" highlight="4" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left;"></div>

=== Vertikale Ausrichtung ===
Text oben, unten oder mittig ausrichten.

==== Zellen gemeinsam vertikal ausrichten ====
Alle Inhaltszellen gemeinsam lassen sich nur über die <code>[[#toptextcells|class="toptextcells"]]</code> ausrichten. Ansonsten können die Zellen nur zeilenweise oder einzeln ausgerichtet werden.

==== Zeilen vertikal ausrichten ====
'''Syntax:''' <code>style="vertical-align:top;"</code> oder <code>style="vertical-align:bottom;"</code> ein <code>style="vertical-align:middle;"</code> Standardverhalten, kann entfallen
<div style="float:left; margin-right:1em;">
{| class="wikitable"
|- style="vertical-align:top;"
| [[Datei:Lilie stilisiert.svg|x120px|alt=|Lilie]]
| oben
| Inhalt
|- style="vertical-align:bottom;"
| [[Datei:Pilz Masoala.JPG|x120px|alt=|Ein Pilz]]
| unten
| Inhalt
|-
| A<br />B<br />C
| mittig
| Inhalt
|}
</div>
<syntaxhighlight lang="html" highlight="2,6" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left;"></div>

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

<div style="float:left; margin-right:1em;">
{| class="wikitable"
|-
| A<br />B<br />C
|style="vertical-align:top;"| oben 
|style="vertical-align:bottom;"|unten
| mittig
|-
| [[Datei:Pilz Masoala.JPG|x120px|alt=|Ein Pilz]]
|style="vertical-align:top;"| oben 
|style="vertical-align:bottom;"|unten
| mittig
|}
</div>
<syntaxhighlight lang="html" highlight="4-5,9-10" style="float:left;">
{| 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
|}
</syntaxhighlight>
<div style="clear:left;"></div>

== Dekoration ==
{{Info}} Farben sollten immer nur sparsam eingesetzt werden.
{{Siehe auch|Hilfe:Farbe|Wikipedia:BIENE/Farbenfehlsichtigkeit|Hilfe:Textgestaltung/Barrierefreiheit}}
* [[Hilfe:CSS #Farben]]

=== {{Anker|CSS}} CSS-Klassen für Farben ===
Mit <code>class="hintergrundfarbeX"</code> kann eine der 9 [[Hilfe:Farbe #Hintergrundfarben|Wikipedia-Standardfarben]] vergeben werden, wobei anstelle des „X“ eine Ziffer zwischen 1 und 9 verwendet wird.

{| class="wikitable"
|- id="hintergrundfarbe"
! Hintergrundfarbe || RGB-Code !! Standard bei
|-
| hintergrundfarbe1 ||class="hintergrundfarbe1"| #F8F9FA || [[#wikitable|class="wikitable"]] (Inhaltszellen)
|-
| hintergrundfarbe2 ||class="hintergrundfarbe2"| #FFFFFF || <s>[[#mw-datatable|class="mw-datatable"]] (Inhaltszellen, weiß)</s>
|-
| hintergrundfarbe3 ||class="hintergrundfarbe3"| #FFFF40 ||rowspan="2"| keine Standardverwendung
|-
| hintergrundfarbe4 ||class="hintergrundfarbe4"| #FFAA00
|-
| hintergrundfarbe5 ||class="hintergrundfarbe5"| #EAECF0 || class="wikitable" (Kopfzellen)
|-
| hintergrundfarbe6 ||class="hintergrundfarbe6"| #B3B7FF ||rowspan="4"| keine Standardverwendung
|-
| hintergrundfarbe7 ||class="hintergrundfarbe7"| #FFCBCB
|-
| hintergrundfarbe8 ||class="hintergrundfarbe8"| #FFEBAD
|-
| hintergrundfarbe9 ||class="hintergrundfarbe9"| #B9FFC5
|}

=== Farbe aller Inhaltszellen gemeinsam ändern ===
Tabellenanfang <code>{|</code>

'''class – hintergrundfarbe 1 bis 9'''
<div style="float:left; margin-right:4em;">
<code>{| class="wikitable hintergrundfarbeX"</code>
{| class="wikitable hintergrundfarbe8"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
<code>{| class="hintergrundfarbe5"</code>
{| class="hintergrundfarbe5"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| class="wikitable hintergrundfarbe8"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
</pre>
</div>
<div style="clear:left;"></div>

'''style – frei wählbare Farben'''
<div style="float:left; margin-right:4em;">
<code>{| class="wikitable" style="background:#RRGGBB;"</code>
{| 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
|}
<code>{| style="background:#FEDCBA;"</code>
{| style="background:#FEDCBA;"
|-
! Kopfzelle !! Kopfzelle !! Kopfzelle
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== Farbe einer Zeile ändern ===
Anweisung nach dem Zeilentrenner <code>|-</code>

'''class – hintergrundfarbe 1 bis 9'''
<div style="float:left; margin-right:4em;">
<code>|- class="hintergrundfarbeX"</code>
{| 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
|}
Einfache Tabelle
{|
|-
! 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

'''style – frei wählbare Farben'''
<div style="float:left; margin-right:4em;">
<code>|- style="background:#RRGGBB;"</code>
{| class="wikitable"
|- 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
|}
Einfache Tabelle
{|
|- 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
|}
Einfache sortierbare Tabelle (toccolours)
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabellen:<ref>Die Anweisung ist bei der Verwendung mit <code>class="wikitable"</code> für Kopfzeilen wirkungslos, siehe auch [[#Einschränkungen|Einschränkungen]]. Einige Tabellen können auch zeilenweise eingefärbt werden, dies gilt auch für <code>class="sortable"</code>.</ref>
<pre style="white-space: pre nowrap">
{| 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
|}
</pre><pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== 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'''
<div style="float:left; margin-right:4em;">
<code>|class="hintergrundfarbeX"|</code>
{| 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
|}
Einfache Tabelle
{|
|-
! 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

'''style – frei wählbare Farben'''
<div style="float:left; margin-right:4em;">
<code>{| class="wikitable" style="background:#RRGGBB;"</code>
{| 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
|}
Einfache Tabelle
{|
|-
! 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== Einschränkungen ===
Die Möglichkeiten der Farbgebung werden durch die verwendeten Tabellen-Klassen beeinflusst. So wäre es beispielsweise möglich, nur einzelne Zellen einer Tabelle <code>[[#tabelle-zeile-aktiv|class="wikitable tabelle-zeile-aktiv"]]</code> (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.
<div style="float:left; margin-right:4em;">
<code>class="wikitable tabelle-zeile-aktiv"</code>
{| class="wikitable 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

== 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.
* [[Hilfe:Tabellen/Sortierung]]

=== mit farbigem Tabellenkopf, in Wikipedia-Standardfarben ===
Soll eine sortierbare Tabelle in der Kopfzeile ({{Taste|!}} 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.

<div style="float:left; margin-right:4em;">
<code>|- class="hintergrundfarbe…"</code>
{| 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
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

=== {{Anker|sortBG}} 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 <code>style</code>-Attribut zugewiesen werden muss und dass bei sortierbaren Tabellen (class="wikitable" oder class="mw-collapsible) <code style="white-space:nowrap">style="background-color:#RRGGBB"</code> verwendet werden muss, damit durch die Style-Zuweisung nicht versehentlich die Sortierpfeile deaktiviert werden.

<div style="float:left; margin-right:4em;">
<code>! style="background-color:#RRGGBB;"|</code>
{| 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
|}
<code>! style="background:#RRGGBB;"|</code> ohne Pfeile
{| class="wikitable sortable"
|-
!style="background:#6B8E23"| Vorname !!style="background:#6B8E23"| Name !!style="background:#6B8E23"| Größe
|-
| John || Smith || 1,85
|-
| Ron || Ray || 1,89
|-
| Mario || Bianchi || 1,72
|-
!colspan="2"| Durchschnitt: !! 1,82
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<pre style="white-space: pre nowrap">
{| 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
|}
</pre>
</div>
<div style="clear:left;"></div>

== Klappfunktion ==
{{Info}} Inhalte sollten in Artikeln generell nicht verborgen werden. Technisch lässt sich ein [[#mw-collapsible|Inhalt einklappen]].
* Dies wird oftmals in [[Hilfe:Navigationsleisten|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 [[Spezial:Diff/170193890/170193924|Wikipedia:Handbuch]].

== Unterstützende Vorlagen ==
* [[:Kategorie:Vorlage:Tabellenformatierung]]
* [[:Kategorie:Vorlage:Piktogramm]]

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.

{| class="wikitable"
|-
| schlecht: || ✓ || ☑ || ✘
|-
| besser: || ✓ ok || ☑ check || {{X}}
|}

== Weitere Informationen ==
* [[Hilfe:Tabellen]] – Grundlagen, einfache Tabellen
* [[Hilfe:Tabellen/Wikisyntax]] – Syntaxelemente der Tabellen
* [[Hilfe:Tabellen/VisualEditor]] – Tabellen in der visuellen Bearbeitung
* [[Hilfe:Tabellen/Sortierung]] – Spezialfunktion für sortierbare Tabellen
* [[Hilfe:Tabellen für Fortgeschrittene]] – erweiterte Gestaltungsmöglichkeiten
* [[Hilfe:Infoboxen]], [[Hilfe:Navigationsleisten]], [[Wikipedia:Taxoboxen]], [[Wikipedia:Formatvorlage]] – Spezielle Tabellenformen

== Anmerkungen ==
<references />
<noinclude>
[[Kategorie:Hilfe:Listen und Tabellen]]
[[Kategorie:Hilfe:Wikisyntax]]
</noinclude>