Cowboy am 10. Mai 2025 um 22:22 Uhr

2025-05-10T22:22:07Z

← Nächstältere Version		Version vom 11. Mai 2025, 00:22 Uhr
Zeile 13:		Zeile 13:
	: [[#Klassenbezeichner\|Klassenbezeichner]] zuweisen		: [[#Klassenbezeichner\|Klassenbezeichner]] zuweisen
	: [[Hilfe:Tags#class\|Beschreibung]]		: [[Hilfe:Tags#class\|Beschreibung]]
	: Herkunft: [[Hypertext Markup Language\|HTML]]		: Herkunft: {{WP\|Hypertext Markup Language\|HTML}}
	; colspan=		; colspan=
	: Mehrere Spalten überspannen		: Mehrere Spalten überspannen
	: [[Hilfe:Tabellen#colspan\|Beschreibung]]		: [[Hilfe:Tabellen#colspan\|Beschreibung]]
	: Herkunft: [[Hypertext Markup Language\|HTML]]		: Herkunft: {{WP\|Hypertext Markup Language\|HTML}}
	; data-sort-type=		; data-sort-type=
	: Datentyp der Sortierung einer Spalte		: Datentyp der Sortierung einer Spalte
	: [[Hilfe:Tabellen/Sortierung#data-sort-type\|Beschreibung]]		: [[Hilfe:Tabellen/Sortierung#data-sort-type\|Beschreibung]]
	: Herkunft: [[MediaWiki]]		: Herkunft: {{WP\|MediaWiki}}
	; data-sort-value=		; data-sort-value=
	: Sortierwert für eine Zelle		: Sortierwert für eine Zelle
	: [[Hilfe:Tabellen/Sortierung#data-sort-value\|Beschreibung]]		: [[Hilfe:Tabellen/Sortierung#data-sort-value\|Beschreibung]]
	: Herkunft: [[MediaWiki]]		: Herkunft: {{WP\|MediaWiki}}
	; id=		; id=
	: Sprungziel setzen		: Sprungziel setzen
	: [[Hilfe:Tabellen#Anker in Tabellen\|Beschreibung]]		: [[Hilfe:Tabellen#Anker in Tabellen\|Beschreibung]]
	: Herkunft: [[Hypertext Markup Language\|HTML]]		: Herkunft: {{WP\|Hypertext Markup Language\|HTML}}
	; rowspan=		; rowspan=
	: Mehrere Zeilen überspannen		: Mehrere Zeilen überspannen
	: [[Hilfe:Tabellen#rowspan\|Beschreibung]]		: [[Hilfe:Tabellen#rowspan\|Beschreibung]]
	: Herkunft: [[Hypertext Markup Language\|HTML]]		: Herkunft: {{WP\|Hypertext Markup Language\|HTML}}
	; scope=		; scope=
	: Überschriften-Richtung zuweisen (Spalte oder Zeile)		: Überschriften-Richtung zuweisen (Spalte oder Zeile)
	: [[Hilfe:Tabellen/Beispiele#scope\|Beschreibung]]		: [[Hilfe:Tabellen/Beispiele#scope\|Beschreibung]]
	: Herkunft: [[Hypertext Markup Language\|HTML]]		: Herkunft: {{WP\|Hypertext Markup Language\|HTML}}
	; style=		; style=
	: [[Hilfe:CSS\|CSS]] zuweisen		: [[Hilfe:CSS\|CSS]] zuweisen
	: [[Hilfe:Tags#style\|Beschreibung]]		: [[Hilfe:Tags#style\|Beschreibung]]
	: Herkunft: [[Hypertext Markup Language\|HTML]]		: Herkunft: {{WP\|Hypertext Markup Language\|HTML}}

	=== Klassenbezeichner ===		=== Klassenbezeichner ===
Zeile 49:		Zeile 49:
	: [[#mw-collapsible\|Beschreibung]]		: [[#mw-collapsible\|Beschreibung]]
	: <code>mw-collapsed</code> (abhängig)		: <code>mw-collapsed</code> (abhängig)
	: Herkunft: [[MediaWiki]]		: Herkunft: {{WP\|MediaWiki}}
	; mw-datatable		; mw-datatable
	: Veraltet; jetzt <code style="white-space:nowrap">[[#tabelle-zeile-aktiv\|tabelle-zeile-aktiv]]</code>		: Veraltet; jetzt <code style="white-space:nowrap">[[#tabelle-zeile-aktiv\|tabelle-zeile-aktiv]]</code>
Zeile 59:		Zeile 59:
	: Tabelle soll sortierbar sein		: Tabelle soll sortierbar sein
	: [[Hilfe:Tabellen/Sortierung#Wikitext\|Beschreibung]]		: [[Hilfe:Tabellen/Sortierung#Wikitext\|Beschreibung]]
	: Herkunft: [[MediaWiki]]		: Herkunft: {{WP\|MediaWiki}}
	; tabelle-kopf-fixiert		; tabelle-kopf-fixiert
	: Tabellenkopf beim Scrollen am oberen Rand fixieren		: Tabellenkopf beim Scrollen am oberen Rand fixieren
Zeile 78:		Zeile 78:
	: Spalte nicht sortieren		: Spalte nicht sortieren
	: [[Hilfe:Tabellen/Sortierung#unsortable\|Beschreibung]]		: [[Hilfe:Tabellen/Sortierung#unsortable\|Beschreibung]]
	: Herkunft: [[MediaWiki]]		: Herkunft: {{WP\|MediaWiki}}
	; wikitable		; wikitable
	: Tabelle allgemein aufhübschen; Kopfzeilen hervorheben, Rahmenlinien		: Tabelle allgemein aufhübschen; Kopfzeilen hervorheben, Rahmenlinien
	: [[Hilfe:Tabellen/wikitable\|Beschreibung]]		: [[Hilfe:Tabellen/wikitable\|Beschreibung]]
	: Herkunft: [[MediaWiki]]		: Herkunft: {{WP\|MediaWiki}}
	; zebra		; zebra
	: Zeilen abwechselnd farbig hinterlegen		: Zeilen abwechselnd farbig hinterlegen

Cowboy: Die Seite wurde neu angelegt: „{{Hilfe}} Diese Hilfeseite stellt '''Tabellen'''-Syntax dar, die seltener in enzyklopädischen Artikeln benötigt wird. Die Grundlagen aus Hilfe:Tabellen werden durch zusätzliche Informationen '''erweitert'''. = Erweitert = Tabellen-Syntax, die seltener in enzyklopädischen Artikeln benötigt wird. Die #Grundlagen werden durch zusätzliche Informationen erweitert. == Klassenbezeichner und Attribu…“

2025-05-10T22:18:46Z

Die Seite wurde neu angelegt: „<noinclude>{{Hilfe}} Diese Hilfeseite stellt '''Tabellen'''-Syntax dar, die seltener in enzyklopädischen Artikeln benötigt wird. Die Grundlagen aus Hilfe:Tabellen werden durch zusätzliche Informationen '''erweitert'''.</noinclude><includeonly> = Erweitert = Tabellen-Syntax, die seltener in enzyklopädischen Artikeln benötigt wird. Die #Grundlagen werden durch zusätzliche Informationen erweitert.</includeonly> == Klassenbezeichner und Attribu…“

Neue Seite

<noinclude>{{Hilfe}}
Diese Hilfeseite stellt '''Tabellen'''-Syntax dar, die seltener in enzyklopädischen Artikeln benötigt wird. Die Grundlagen aus [[Hilfe:Tabellen]] werden durch zusätzliche Informationen '''erweitert'''.</noinclude><includeonly>
= Erweitert =
Tabellen-Syntax, die seltener in enzyklopädischen Artikeln benötigt wird. Die [[#Grundlagen]] werden durch zusätzliche Informationen erweitert.</includeonly>

== Klassenbezeichner und Attribute ==
Nachstehend ein Index von Klassenbezeichnern und Attributen, die speziell für Tabellen sinnvoll sind. Sie können den Elementen (Tabelle, Zeile, Zelle) geeignet zugeordnet werden.

=== Attribute ===
Sie können je nach Zweck einer ganzen Tabelle oder einer ganzen Zeile oder einer einzelnen Zelle zugewiesen werden, um eine bestimmte Gestaltung oder Eigenschaft zu bewirken.
* ''Siehe allgemein:'' [[Hilfe:Tags#Attribute|Attribute]]; außerdem: [[Hilfe:Tabellen/Veraltet|veraltete Attribute]]
; class=
: [[#Klassenbezeichner|Klassenbezeichner]] zuweisen
: [[Hilfe:Tags#class|Beschreibung]]
: Herkunft: [[Hypertext Markup Language|HTML]]
; colspan=
: Mehrere Spalten überspannen
: [[Hilfe:Tabellen#colspan|Beschreibung]]
: Herkunft: [[Hypertext Markup Language|HTML]]
; data-sort-type=
: Datentyp der Sortierung einer Spalte
: [[Hilfe:Tabellen/Sortierung#data-sort-type|Beschreibung]]
: Herkunft: [[MediaWiki]]
; data-sort-value=
: Sortierwert für eine Zelle
: [[Hilfe:Tabellen/Sortierung#data-sort-value|Beschreibung]]
: Herkunft: [[MediaWiki]]
; id=
: Sprungziel setzen
: [[Hilfe:Tabellen#Anker in Tabellen|Beschreibung]]
: Herkunft: [[Hypertext Markup Language|HTML]]
; rowspan=
: Mehrere Zeilen überspannen
: [[Hilfe:Tabellen#rowspan|Beschreibung]]
: Herkunft: [[Hypertext Markup Language|HTML]]
; scope=
: Überschriften-Richtung zuweisen (Spalte oder Zeile)
: [[Hilfe:Tabellen/Beispiele#scope|Beschreibung]]
: Herkunft: [[Hypertext Markup Language|HTML]]
; style=
: [[Hilfe:CSS|CSS]] zuweisen
: [[Hilfe:Tags#style|Beschreibung]]
: Herkunft: [[Hypertext Markup Language|HTML]]

=== Klassenbezeichner ===
''Siehe allgemein:'' [[CowboysWiki:Technik/Skin/CSS/Selektoren (Index)|Selektoren-Index]] und speziell [[Hilfe:Farbe #Hintergrundfarben|Wikipedia-Standardfarben]].
; mw-collapsible
: Einklappbares Element
: [[#mw-collapsible|Beschreibung]]
: <code>mw-collapsed</code> (abhängig)
: Herkunft: [[MediaWiki]]
; mw-datatable
: Veraltet; jetzt <code style="white-space:nowrap">[[#tabelle-zeile-aktiv|tabelle-zeile-aktiv]]</code>
; prettytable
: Veraltet: Tabelle allgemein aufhübschen
: [[Hilfe:Tabellen/prettytable|Beschreibung]]
: Herkunft: deWP
; sortable
: Tabelle soll sortierbar sein
: [[Hilfe:Tabellen/Sortierung#Wikitext|Beschreibung]]
: Herkunft: [[MediaWiki]]
; tabelle-kopf-fixiert
: Tabellenkopf beim Scrollen am oberen Rand fixieren
: [[#tabelle-kopf-fixiert|Beschreibung]]
: Herkunft: [[Vorlage:Tabellenstile]]
; tabelle-zaehler
: [[Hilfe:Tabellen/Zählung|Beschreibung]]
: Herkunft: [[Vorlage:Tabellenstile]]
; tabelle-zeile-aktiv
: Datenzeile am Mauszeiger hervorheben
: [[#tabelle-zeile-aktiv|Beschreibung]]
: Herkunft: [[Vorlage:Tabellenstile]]
; toptextcells
: Alle Zellen-Inhalte nach oben ausrichten
: [[Hilfe:Tabellen#toptextcells|Beschreibung]]
: Herkunft: deWP
; unsortable
: Spalte nicht sortieren
: [[Hilfe:Tabellen/Sortierung#unsortable|Beschreibung]]
: Herkunft: [[MediaWiki]]
; wikitable
: Tabelle allgemein aufhübschen; Kopfzeilen hervorheben, Rahmenlinien
: [[Hilfe:Tabellen/wikitable|Beschreibung]]
: Herkunft: [[MediaWiki]]
; zebra
: Zeilen abwechselnd farbig hinterlegen
: [[#zebra|Beschreibung]]
: Herkunft: deWP

==== Beispiele ====
[[Hilfe:Tabellen/Beispiele#CSS.class|Beispiele zu den einigen Klassen]]

==== Kombinationen von Klassen ====
Die genannten Klassen lassen sich teilweise kombinieren. Hierbei sollte Augenmaß gewahrt werden, nicht jede Eigenschaft ist immer passend. Sinnvolle Kombinationen wären:
* Sortierbare Wikitables: <code style="white-space:nowrap">class="wikitable sortable"</code>
* Oben ausgerichtete Texte in Zellen mit Wikitable: <code style="white-space:nowrap">class="wikitable toptextcells"</code>
* Kombinationen aller drei Stile: <code style="white-space:nowrap">class="wikitable toptextcells sortable"</code>
Die Klassenbezeichner werden durch Leerzeichen getrennt aufgelistet (nicht mit Komma!).

== Optische Gestaltung ==

=== {{Anker|zebra}} zebra – Zeilen abwechselnd farbig hinterlegen ===
[[Datei:OOjs UI icon eyeClosed.svg|16px|verweis=|alt=|visueller Editor]] – nicht veränderbar<ref>Derzeit (2024) kann diese Klasse nicht bei der Bearbeitung mit dem [[Hilfe:VisualEditor|VisualEditor]] beeinflusst werden. Soll die Zebrafärbung aufgehoben oder verändert werden, so muss dies im [[Hilfe:VisualEditor/Wikitext|Wikitextmodus]] geschehen.</ref>

{{Info}} <code>class="zebra"</code> ist eine spezielle Eigenschaft der Tabelle <code>class="wikitable"</code>, sie ist nur gemeinsam mit dieser Klasse wirksam.

'''Quelltext:'''
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable zebra"
</syntaxhighlight>
* Die Zeilen einer Tabelle werden abwechselnd in reinem Weiß (<code>#FFFFFF</code>) hervorgehoben (diese Farbe ist so festgelegt und wirkt sich nur auf Inhaltszellen aus); bzw. werden im Dunkelmodus invertiert.
* Die Hintergrundfarbe der anderen Zellen behält das Hellgrau der ''wikitable''-Vorgabe. Dieser Effekt kann durch eine zusätzlich für die gesamte Tabelle definierte Hintergrundfarbe oder eine entsprechende ''style''-Zuweisung verstärkt werden.
* Die Wechselfärbung kann bei [[Hilfe:Tabellen#span|verbundenen Zeilen]] unerwünschte Effekte hervorrufen; [[Hilfe:Tabellen/Beispiele#zebra|Beispiel]].
** Bei Verwendung zusammen mit <code>rowspan=""</code> richtet sich die Farbe jeder Zelle nach der ersten Zeile, zu der die Zelle gehört.
* Das [[Hilfe:Tabellen/Beispiele#Dekoration|Einfärben]] einzelner Zellen ist weiterhin möglich.
* Eine Kombination mit der [[Hilfe:Tabellen/Sortierung|Sortierfunktion]] ist möglich, die abwechselnde Farbgebung wird nicht mitsortiert.

=== Trennlinien ===

==== Zellenränder und Trennstriche ====
Mit diesen Deklarationen können Trennstriche zwischen bestimmten Zellen realisiert oder ausgeblendet werden.

'''[[Hilfe:Tabellen/Beispiele#Zellenränder|Beispiele]]'''

===== Horizontaler Trennstrich =====
Dieser Tabelle wurde eine Schriftart für alle Zellen zugewiesen, hier <code style="white-space:nowrap">font-family: monospace</code>, um eine feste [[Laufweite]] zu erreichen. Damit die [[Hilfe:Tabellen/Beispiele#Überschriften|Tabellenüberschrift]] davon ausgenommen wird, muss ihr eine andere Schriftart zugewiesen werden, hier <code style="white-space:nowrap">font-family: sans-serif</code>. Die Stärke, Art, Farbe und Position des Trennstrichs könnte verändert werden. Der kleine Spalt zwischen den Zellen kann durch <code style="white-space:nowrap">style="border-collapse:collapse;"</code> am Tabellenanfang vermieden werden.
<div style="float:left; margin-right:4em;">
<code>|style="border-top: 1px solid #000000;"|</code>
{| style="text-align:right; font-family: monospace; width:10em;"
|+ style="font-family: sans-serif;"| Einfache Addition
|-
| 365 || 563
|-
| + 123 || + 321
|-
| + 235 || + 532
|-
| + 277 || + 772
|-
|style="border-top: 1px solid #000000;"| 1000
|style="border-top: 1px solid #000000;"| 2188
|}
<code>{| style="border-collapse:collapse;"</code>
{| style="text-align:right; font-family: monospace; width:10em; border-collapse:collapse;"
|+ style="font-family: sans-serif;"| Einfache Addition
|-
| 365 || 563
|-
| + 123 || + 321
|-
| + 235 || + 532
|-
| + 277 || + 772
|-
|style="border-top: 1px solid #000000;"| 1000
|style="border-top: 1px solid #000000;"| 2188
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| style="text-align:right; font-family: monospace; width:10em;"
|+ style="font-family: sans-serif;"| Einfache Addition
|-
| 365 || 563
|-
| + 123 || + 321
|-
| + 235 || + 532
|-
| + 277 || + 772
|-
|style="border-top: 1px solid #000000;"| 1000
|style="border-top: 1px solid #000000;"| 2188
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

===== Vertikaler Trennstrich =====
Die hier etwas dickeren Trennstriche zwischen den Zellen werden mit der alternativen Angabe <code>medium solid</code> realisiert:
* <code>medium</code> entspricht in etwa <code>3px</code>, neben dieser Angabe wären auch <code>thin</code> ca. <code>1px</code> (wäre bei wikitable wirkungslos) oder <code>thick</code> ca. <code>5px</code> möglich.
* Dem Strich kann eine Farbe gegeben werden.
<div style="float:left; margin-right:4em;">
<code>|style="border-right: medium solid;"|</code>
{| class="wikitable" style="text-align:center;"
|-
|style="border-right: medium solid;"| Links
| Rechts
|-
|style="border-right: medium solid;"| left
| right
|}
<code>|style="border-right: 2px solid #DD0000;"|</code>
{| class="wikitable" style="text-align:center;"
|-
|style="border-right: 2px solid #DD0000;"| Links
| Rechts
|-
|style="border-right: 2px solid #DD0000;"| left
| right
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable" style="text-align:center;"
|-
|style="border-right: medium solid;"| Links
| Rechts
|-
|style="border-right: medium solid;"| left
| right
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

==== Einfache Tabelle ====
Tabelle ohne Zellenränder, hier steht <code>y</code> für den Wert der Rahmenstärke.
<div style="float:left; margin-right:4em;">
<code>style="border: 1px solid #000000;"</code>
{| style="border: 1px solid #000000;"
|-
! Kopf 1
! Kopf 2
! Kopf 3
|-
| Zelle 1
| Zelle 2
| Zelle 3
|-
| Zelle 4
| Zelle 5
| Zelle 6
|}
<code>style="border: 3px solid #ABCDEF;"</code>
{| style="border: 3px solid #ABCDEF;"
|-
! Kopf 1
! Kopf 2
! Kopf 3
|-
| Zelle 1
| Zelle 2
| Zelle 3
|-
| Zelle 4
| Zelle 5
| Zelle 6
|}
<code>style="border: 5px solid #FEDCBA;"</code>
{| style="border: 5px solid #FEDCBA;"
|-
! Kopf 1
! Kopf 2
! Kopf 3
|-
| Zelle 1
| Zelle 2
| Zelle 3
|-
| Zelle 4
| Zelle 5
| Zelle 6
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| style="border: ypx solid #000000;"
|-
! Kopf 1
! Kopf 2
! Kopf 3
|-
| Zelle 1
| Zelle 2
| Zelle 3
|-
| Zelle 4
| Zelle 5
| Zelle 6
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

=== Zellenabstände ===
Um einen ähnlichen Effekt zu erreichen, wie er bei einfachen Tabellen mit den veralteten HTML-Attributen <code>cellspacing</code> und <code>cellpadding</code> erzeugt werden konnte, gibt es einige Möglichkeiten.
* <code>style="border-collapse: separate;"</code> – erzeugt einen Doppelrahmen, bei dem sich die inneren und äußeren Abstände beeinflussen lassen.
* <code>style="border-spacing:…;"</code> – Abstand zwischen Zellenrand und Tabellenrand oder den benachbarten Zellen (erfordert <code>style="border-collapse: separate;"</code>). Es können ein oder zwei Werte <code>style="border-spacing: 2px 4px;"</code> übergeben werden.
* <code>style="padding:…;"</code> – <code>-top</code> <code>-left</code> <code>-bottom</code> <code>-right</code>
* <code>style="margin:…;"</code> – <code>-top</code> <code>-left</code> <code>-bottom</code> <code>-right</code>
* <code>style="border-collapse: collapse;"</code> lässt zusammenfallende Zellumrandungen verschwinden. (Standard bei <code>class="wikitable"</code>)

==== Separate Ränder ====
Gerahmte Tabelle mit getrennten Rändern.

<div style="float:left; margin-right:4em;">
<code>style="border-collapse: separate;"</code>
{| class="wikitable" style="border-collapse: separate;"
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable" style="border-collapse: separate;"
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

==== border-spacing ====
Das <code>style="border-spacing:…;"</code> ändert die Abstände zwischen allen Rändern der Tabelle.
<div style="float:left; margin-right:4em;">
<code>style="border-collapse: separate; border-spacing:…em;"</code>
{| class="wikitable" style="border-collapse: separate; border-spacing: .5em;"
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable" style="border-collapse: separate; border-spacing: .5em;"
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

Unterschiedlicher Abstand horizontal, vertikal:
<div style="float:left; margin-right:4em;">
<code>style="border-collapse: separate; border-spacing: …em …em;"</code>
{| class="wikitable" style="border-collapse: separate; border-spacing: .2em .8em;"
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
{| class="wikitable" style="border-collapse: separate; border-spacing: .8em .2em;"
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable" style="border-collapse: separate; border-spacing: …em …em;"
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

==== Tabellenrahmenabstände ====
Dem äußeren Rahmen der Tabelle (<code>class="wikitable"</code>) kann separat ein größerer Abstand zu den Inhaltszellen übergeben werden.
* <code>style="padding:…;"</code>
* <code>style="padding-top:…;"</code> <code>style="padding-left:…;"</code> <code>style="padding-bottom:…;"</code> <code>style="padding-right:…;"</code>
<div style="float:left; margin-right:4em;">
<code>{| style="border-collapse: separate; padding: …em;"</code>
{| class="wikitable" style="border-collapse: separate; padding: 2em;"
|+ wikitable
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
Der Abstand zwischen Rahmen und Inhalt beträgt <code>2em</code>
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable" style="border-collapse: separate; padding: 2em;"
|+ wikitable
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

Dem äußeren Rahmen der Tabelle (<code>class="wikitable"</code>) kann separat ein größerer Abstand zu den sie umgebenden Seiteninhalten übergeben werden.
* <code>style="margin:…;"</code> – Attribute:
* <code>style="margin-top:…;"</code> <code>style="margin-left:…;"</code> <code>style="margin-bottom:…;"</code> <code>style="margin-right:…;"</code>

<div style="float:left; margin-right:4em;">
<code>{| style="border-collapse: separate; margin: …em;"</code>
{| class="wikitable" style="border-collapse: separate; margin: 2em;"
|+ wikitable
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
Diese Tabelle ist rundum mit einem Abstand von <code>2em</code> versehen.
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable" style="border-collapse: separate; margin: 2em;"
|+ wikitable
|-
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>

=== Texteinrückung ===
[[Datei:OOjs UI icon eyeClosed.svg|16px|verweis=|alt=|visueller Editor]] – nicht veränderbar

Eine Texteinrückung, d. h. eine Darstellung, bei der der Text nicht am linken Rand beginnt (bei linksseitiger Ausrichtung) bzw. nicht am rechten Rand endet (bei rechtsseitiger Ausrichtung), sondern etwas eingerückt wird, kann über das ''cell padding'' („Zellen-Auspolsterung“)-Attribut erreicht werden:

<div style="float:left; margin-right:4em;">
<code>style="padding-…;"</code>
{| class="wikitable"
|-
| Linksbündig<br /> ohne Einrückung || 1
|-
|style="padding-left:2em"| Linksbündig<br /> mit Einrückung || 2
|-
|style="text-align:right"| Rechtsbündig<br /> ohne Einrückung || 3
|-
|style="text-align:right; padding-right:2em"| Rechtsbündig<br /> mit Einrückung || 4
|}
</div><div style="float:left;">
'''Quelltext''' dieser Tabelle:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| class="wikitable"
|-
| Linksbündig<br /> ohne Einrückung || 1
|-
|style="padding-left:2em"| Linksbündig<br /> mit Einrückung || 2
|-
|style="text-align:right"| Rechtsbündig<br /> ohne Einrückung || 3
|-
|style="text-align:right; padding-right:2em"| Rechtsbündig<br /> mit Einrückung || 4
|}
</syntaxhighlight>
</div>
<div style="clear:left;"></div>
Der gesamte Tabelleninhalt wird rechtsbündig, wenn man im Tabellenkopf <code>{| style="text-align:right;"</code> angibt. Spaltenweise rechtsbündig oder sonst abweichend ist nicht möglich.

=== Ecken abrunden ===
Es ist technisch möglich, den Rahmen einer Tabelle mit abgerundeten Ecken zu präsentieren. Dies ist allerdings für ''class="wikitable"'' nicht vorgesehen und sollte auch nicht in Artikeln eingesetzt werden.

'''[[Hilfe:Tabellen/Beispiele#Ecken abrunden|Beispiele]]'''

== Funktionelle Effekte ==
Funktionelle Effekte sollen bei der interaktiven Benutzung dynamische Effekte auslösen, während zunächst die Darstellung ein statisches, unveränderliches Bild abgibt.

=== {{Anker|tabelle-zeile-aktiv}} <span id="mw-datatable">Datenzeile am Mauszeiger hervorheben</span> ===
[[Datei:OOjs UI icon eyeClosed.svg|16px|verweis=|alt=|visueller Editor]] – nicht veränderbar

{{Info}} <code>class="tabelle-zeile-aktiv"</code> ist eine spezielle Eigenschaft der Tabelle <code>class="wikitable"</code>, sie ist nur gemeinsam mit dieser Klasse wirksam. Damit die erforderlichen Stildefinitionen bereitstehen, muss die [[Vorlage:Tabellenstile]] auf der Seite eingebunden sein.

'''Quelltext:'''
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{{Tabellenstile}}
{| class="wikitable tabelle-zeile-aktiv"
</syntaxhighlight>
* Die Hintergrundfarbe der Inhaltszellen wechselt für die gesamte Zeile {{Farbe|var(--background-color-neutral-subtle,#EAF3FF) |width=30px |height=15px |border=1}}, wenn man mit dem Mauszeiger über eine Zelle fährt („aktive“ Zelle bzw. Zeile).
* Die Lesbarkeit einer Tabelle mit vielen Daten kann dadurch eventuell verbessert werden.
Nachteil:
* Die Anwendung kann bei [[Hilfe:Tabellen#span|verbundenen Zellen]] unerwünschte Effekte hervorrufen; [[Hilfe:Tabellen/Beispiele#tabelle-zeile-aktiv|Beispiel]].
* Die Inhaltszellen sollten nicht individuell [[Hilfe:Tabellen/Beispiele#Einschränkungen|eingefärbt]] werden, da der Effekt der blauen Hinterlegung beim Überfahren mit dem Mauszeiger verlorengeht.

Die bis März 2022 für den Hervorhebungseffekt zu verwendende Klasse <code>mw-datatable</code> nutzte Stildefinitionen direkt aus dem Anwendungspaket von MediaWiki, was Mitte 2021 unterbunden wurde. <code>mw-datatable</code> war nicht auf Mobilgeräten verfügbar und sorgte darüber hinaus auch für eine abweichende Formatierung der Tabelle (Rahmen, Hintergrundfarben), die zwecks Vereinheitlichung der Tabellenstile nicht in die neue Klasse <code style="white-space:nowrap">tabelle-zeile-aktiv</code> übernommen wurde.

=== {{Anker|tabelle-kopf-fixiert}} Tabellenkopf beim Scrollen am oberen Rand fixieren ===
[[Datei:OOjs UI icon eyeClosed.svg|16px|verweis=|alt=|visueller Editor]] – nicht veränderbar

{{Info}} <code>class="tabelle-kopf-fixiert"</code> ist eine spezielle Eigenschaft der Tabelle <code>class="wikitable"</code>, sie ist nur gemeinsam mit dieser Klasse wirksam. Damit die erforderlichen Stildefinitionen bereitstehen, muss die [[Vorlage:Tabellenstile]] auf der Seite eingebunden sein.

'''Quelltext:'''
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{{Tabellenstile}}
{| class="wikitable tabelle-kopf-fixiert"
</syntaxhighlight>
Bei langen Tabellen kann der Tabellenkopf beim Scrollen am oberen Bildschirmrand fixiert werden, sodass er immer sichtbar bleibt. Dies funktioniert auch, wenn in der gleichen Tabelle mehrere Kopfzeilen vorhanden sind, jedoch wird immer nur die später definierte Kopfzeile angezeigt.

=== Rangliste (Nummerierung der Zeilen) ===
Eine „automatische“ Nummerierung der Zeilen einer Tabelle, so wie es etwa bei einer [[Hilfe:Listen#Nummerierte Liste|nummerierten Liste]] mit dem Zeichen {{Taste|#}} geschieht, ist bei Tabellen ebenfalls möglich. Dies geschieht durch Einfügung einer zusätzlichen vorangestellten Spalte, die eine Zählung der Zeilen ermöglicht und die zugehörige Zeilennummer anzeigt. Die Syntax wird auf [[Hilfe:Tabellen/Zählung]] beschrieben.

Siehe ansonsten: [[Hilfe:Tabellen/Sortierung#Rangliste|Rangliste]]

=== <span id="mw-collapsible">Einklappbare Tabelle</span> ===
{{Achtung|Das (initiale, d. h. Klasse ''mw-collapsed'') Einklappen von Tabellen und Inhalten ist in Artikeln in der Regel unerwünscht. Es sollte nur angewandt werden, wenn es dem Leser den Artikel ''wesentlich'' zugänglicher macht.
* Der Zugang zum eingeklappten Teil wird erschwert.
* Die Inhalte können zwar über die interne Suche gefunden werden, aber nicht über die Suchfunktion des Browsers, wenn die Tabelle eingeklappt ist.
* Nachfolgende [[Vorlage:Anker|#Anker]] oder Überschriften werden oft nicht mehr korrekt angesprungen, der Bildlauf zeigt dann nicht den verlinkten Abschnitt. Anker werden z. B. für Abschnittslinks oder bei Weiterleitungen genutzt. (Um in diesem Fall den Bildlauf nachträglich zur richtigen Zielposition zu bewegen, den Cursor in die Adressleiste des Browsers platzieren und anschließend die Eingabetaste {{Taste|↵ Enter}} drücken.)
}}

* Um diese Funktion nutzen zu können, muss [[JavaScript]] für die Wikipedia aktiviert sein (bei dir ist JavaScript momentan ''<span class="noscript">'''nicht'''</span> aktiviert'')
* Der Inhaltsbereich der Tabelle lässt sich ein- und ausklappen. Beachte: Wesentliche Inhalte des Artikels sollten nicht durch Einklappen verborgen werden, um die [[CowboysWiki:Barrierefreiheit|barrierefreie Zugänglichkeit]] der Inhalte nicht zu beeinträchtigen.
* Je nach Zustand der Tabelle wechselt die Beschriftung der Schaltfläche zwischen <code>'''[{{Hilfe/mark|Einklappen|hellblau}}]'''</code> ''(Collapse)'' und <code>'''[{{Hilfe/mark|Ausklappen|hellblau}}]'''</code> ''(Expand)''
* Durch den Zusatz <code>mw-collapsed</code> ist die Tabelle beim Laden des Artikels eingeklappt
* Durch den Zusatz <code>mw-collapse</code> ist die Tabelle beim Laden des Artikels ausgeklappt, dies entspricht der Funktion <code>class="mw-collapsible"</code> ohne Zusatz
* Bei existierender Tabellenüberschrift wird die Schaltfläche zum Umschalten rechts neben dieser sichtbar (und hat einen Abstand zum Text der Überschrift)

Beispiel-Tabellen: ''[[Hilfe:Tabellen/Beispiele#mw-collapsible]]''

Zu beachten:
* Ohne Tabellenüberschrift sollte eine Kopfzelle (oder komplette Kopfzeile) vorhanden sein. Die Schaltfläche zum Umschalten erscheint dann rechts neben dem Text der letzten rechten Kopfzelle. Andernfalls wird die Schaltfläche zum Umschalten rechts neben dem Inhalt der Zelle am oberen rechten Rand eingeblendet und übernimmt die Eigenschaften dieser Zelle
* Beim Einklappen einer Tabelle mit Tabellenüberschrift reduziert sich die Breite der Tabelle auf die Breite der Überschrift und die Schaltfläche steht darunter. Derart eingeklappte Tabellen sind schlecht vom Fließtext zu unterscheiden. Der Leser nimmt sie eventuell nicht wahr
* Bei Tabellen ohne Tabellenüberschrift steht die Schaltfläche ohne Abstand unmittelbar am Zelleninhalt
* [[Vorlage:Anker|Anker]] (sowie Belegmarken von [[Hilfe:Einzelnachweise|Einzelnachweisen]]), die sich im eingeklappten Inhaltsbereich befinden, können nicht angesprungen werden
* Alternativ kann die ''[[Vorlage:Klappbox]]'' genutzt werden

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

=== Sortierbare Tabelle ===
Siehe [[Hilfe:Tabellen/Sortierung|Sortierung]].

== Vorlagen ==
Alle vorhandenen [[Hilfe:Vorlagen|Vorlagen]] sollten kategorisiert sein:
* [[:Kategorie:Vorlage:Tabellenformatierung]] – Oberkategorie
* [[Vorlage:Navigationsleiste Vorlagen zur Tabellensortierung|Vorlagen zur Tabellensortierung]]

=== {{Anker|VorlagenStruktur}} Vorlagen für Tabellenstruktur ===
Der Einsatz von Vorlagen für Tabellen gleicher Thematik ermöglicht ein konsistentes Tabellenlayout, eine Prüfung der Daten auf Gültigkeit, Erleichterung bei der Fehlerbehandlung, die Einhaltung der Konvention „[[Hilfe:Farbe#Farben verwenden|Farben verwenden]]“ sowie einfache Anpassung des Layouts bei allen Tabellen.

Empfehlenswert ist es, ein Paket mit einer Basis-Vorlage zu bilden:
* <code>Vorlage:MeineStrukturVorlage</code> – definiert eine einzelne Tabellenzeile
* <code>Vorlage:MeineStrukturVorlage/Kopf</code> – Kopfzeile; Tabellenanfang
Insbesondere wenn im Fußbereich noch eine Legende dargestellt werden soll, bietet sich an:
* <code>Vorlage:MeineStrukturVorlage/Fuß</code>
Sollen jetzt auf vielen Seiten ähnliche Tabellen dargestellt werden, kann die Programmierung einmalig einheitliche Überschriften und dekorative Vorgaben festlegen.
* Die Vorlage für die Kopfzeile beginnt die Ausgabe mit <code>{|</code> oder kann noch einen einleitenden Vorlauf voranstellen.
** Danach folgen die Kopfzeilen.
** Parameter sind selten erforderlich.
* Die Vorlage für die Tabellenzeile erhält als Parameter die darzustellenden Werte in den Spalten.
** Die Ausgabe beginnt mit <code>|-</code> und wird von den Zellen der Spalten gefolgt.
** Die Parameter enthalten die Daten, wobei sich im Lauf der Zeit die Zuordnung von Daten zur ersten, zweiten usw. Spalte ändern kann.
** Die Daten können vor der Darstellung ergänzt und formatiert werden, sollten also auf den Nutzinhalt beschränkt werden. Gleichförmige Erweiterungen sollten durch die Vorlagenprogrammierung ergänzt werden, wodurch auch eine zentrale Aktualisierung möglich ist.
** Die Daten können auf Gültigkeit geprüft werden; beim völligen Fehlen von Pflichtangaben oder bei unerlaubten Inhalten kann in der Tabellenzelle eine auffallende und konkrete Fehlermeldung dargestellt werden.
* Oft haben alle Tabellen genau gleiche Struktur, also gleiche Spalten.
** Es können auch Modifikationen erfolgen, indem zusätzliche Spalten hinzukommen oder nicht benötigte Spalten wegfallen. Dann muss die Vorlage für die Kopfzeile mit entsprechenden Steuerparametern eingebunden werden, und aus den Daten für jede Tabellenzeile muss sich ergeben, welche Spalten gewünscht sind.
** In jedem Fall müssen die Programmierungen für die Kopf- und Datenzeilen inhaltlich synchronisiert gehalten werden. Das ist jedoch wesentlich einfacher als Hunderte von Artikeln umzuschreiben.
* Weil die zwei bis drei Vorlagen als Ober- und Unterseiten organisiert sind, ist absolut klar, wie sie zusammengehören.

=== {{Anker|VorlagenDeko}} Vorlagen für Dekorationsstil ===
In bestimmten Themenbereichen kann ein einheitliches Erscheinungsbild gewünscht sein, ohne jedoch die Tabellenstruktur (Anzahl und Inhalte der Spalten) vorzugeben mittels [[#VorlagenStruktur|Vorlagen für Tabellenstruktur]].

Die Einbindung ist nach dem <code>{|</code> einzufügen.

'''Quelltext''' einer Tabelle mit einer <code>MeineDekoVorlage</code>, die bestimmte Zuweisungen für <code>style=</code> bzw. <code>class=</code> liefert:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{| {{MeineDekoVorlage}}
|-
! Treffpunkt Y- u. X-Achse
! Exempel
! Beispiel
! Muster
|-
| X1
|class="hintergrundfarbe6"| X2
| X3
| X4
|-
| Y1
|class="hintergrundfarbe8"| Y2
| Y4
|class="hintergrundfarbe7"| Y5
|}
</syntaxhighlight>

{{Info}}
* Erfolgt hinter der Vorlage eine Zuweisung durch <code>class</code> oder <code>style</code>, so werden die Attribute aus der Vorlage dadurch überschrieben oder unwirksam.
* Stehen solche Zuweisungen vor der Vorlage <code style="white-space:nowrap">{| style="text-align:center;" {{MeineDekoVorlage}}</code>, so bleiben die Attribute der Vorlage nicht notwendigerweise wirksam. Vielmehr kann es sein, dass eine wiederholte Zuweisung <code>style=</code> die erste überschreibt, oder aber dass die wiederholte Zuweisung <code>style=</code> völlig ignoriert wird.
* Wenn überhaupt, muss eine solche Vorlage die Parameter <code>style=</code> bzw. <code>class=</code> anbieten, und deren optionale Werte sind in ihrer Programmierung im Anschluss an deren Vorgaben anzufügen, wodurch es insgesamt nur zu je einer einzigen wirksamen HTML-Zuweisung <code>style=</code> bzw. <code>class=</code> kommt.

=== Tabellen als Vorlagenparameter ===
Bei der Vorlagensyntax trennt eine „offene“ Pipe <code>|</code> den einen Vorlagenparameter vom nächsten ab.
* Tabellen bestehen jedoch aus sehr vielen Pipe-Symbolen, beginnend mit <code>{|</code> und endend mit <code>|}</code> und weitere für jede Zeile und Zelle.
* Jedes Pipe-Symbol der Tabellensyntax muss, damit es nicht als Ende des Parameterwerts interpretiert wird, durch <code><nowiki>{{!}}</nowiki></code> ersetzt werden. Das macht keinen Spaß und wird deshalb vermieden.

=== {{Anker|TabellenGenerierung}} Generierung von Tabellen mittels Vorlagen ===
Eine häufige Aufgabe ist es, dass aus einer bestimmten Zusammenstellung aktueller Daten eine vollständige Tabelle generiert werden soll.
* [[Hilfe:Infoboxen|Infoboxen]] sind der klassische Fall.
* In Abhängigkeit von aktuellen Daten ergibt sich die Notwendigkeit, bestimmte Zeilen ganz wegzulassen; selten auch einmal bestimmte Spalten.
Die folgende Methodik ist etwas aufwändig, jedoch optimal für robust generierte Syntax:
<syntaxhighlight lang="wikitext" style="white-space: pre nowrap">
{{#if: {{{ID|}}} | <nowiki />
{{!}}-
! Bezeichner:
{{!}} {{{ID}}}
}}{{#if: {{{Name|}}} | <nowiki />
</syntaxhighlight>
* Wenn der Parameter <code>ID</code> nicht leer angegeben wurde, wird eine Tabellenzeile generiert.
* Das <syntaxhighlight lang="wikitext" inline><nowiki /></syntaxhighlight> behält den Zeilenumbruch danach bei, während dieser Zweig der <code>[[Hilfe:Parserfunktionen/Kontrollstrukturen#if|#if]]</code>-Abfrage ansonsten führende und schließende Leerzeichen und Zeilenumbrüche entfernen würde.
* Aus den <syntaxhighlight lang="wikitext" inline>{{!}}</syntaxhighlight> werden <code>|</code>.
* Die Leerzeichen am Zeilenbeginn vor der Tabellensyntax stören die Programmierung nicht, machen aber die Programmierung für Menschen besser lesbar.
* Unmittelbar nach den schließenden <code>}}</code> muss die nächste Abfrage beginnen, weil sonst bei mehreren leeren Parameterwerten Leerzeilen kumulieren würden und diese als störender Absatz sichtbar werden.
* Ist der Parameterwert von <code>ID</code> leer oder nicht angegeben, führt das Konstrukt zu keinerlei Ausgabe.

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

Hilfe:Tabellen/Erweitert - Versionsgeschichte

Cowboy am 10. Mai 2025 um 22:22 Uhr