Hilfe:Sortierbare Tabellen

Wiki-Code

Der folgende Text betrifft das Schreiben von Wiki-Syntax, die in einem Quelltexteditor eingegeben werden muss.

Für Hilfe zum Einsortieren von Artikeln in Kategorien, siehe Hilfe:Kategorien.

Sortierbare Tabellen haben die Eigenschaft, Inhalte von Spalten anhand ihrer Werte sortieren zu können. Dies wird mit Hilfe der Eigenschaft class="sortable" im Tabellenquelltext umgesetzt.

Bitte beachte, dass sortierbare Tabellen für die Sortierung JavaScript nutzen und aktuell in der mobilen Ansicht nicht funktionieren.

Eine sortierbare Tabelle erstellen

Das Erstellen einer sortierbaren Tabelle ist einfach, da nur die dafür notwendige Klasse eingefügt werden muss. Dennoch kann in manchen Situationen spezifischer Code notwendig sein. Einige Spezialfälle werden daher auf dieser Seite erläutert.

Beispiel:

{| class="article-table sortable"
! Vorname
! Nachname
! Lieblingsfarbe
|-
| Ben
| Müller
| Braun
|-
| Max
| Schmidt
| Grün
|-
| Sascha
| Schmitz
| Gelb
|}

Ergibt:

Vorname	Nachname	Lieblingsfarbe
Ben	Müller	Braun
Max	Schmidt	Grün
Sascha	Schmitz	Gelb

Das Anklicken der Pfeile ermöglicht dir eine numerische und alphabetische Sortierung der Spalten. Wenn du nach mehreren Spalten sortieren willst, halte UMSCHALTEN beim Anklicken der zweiten Spalte.

Fortgeschrittenes Sortieren

data-sort-type

Spalten werden standardmäßig anhand ihrer ASCII-Reihenfolge sortiert. In den meisten Fällen stellt dies kein Problem dar. Bei Sortierung von Zahlen kann diese Art der Sortierung allerdings zu Problemen führen. Die Zahlen 10, 20 und 100 würden zum Beispiel in der Reihenfolge 10 → 100 → 20 sortiert, da nach Position des ersten Zeichens sortiert wird. Dieses Problem kann durch Benutzung des Attributs „data-sort-type“ an den Spaltenüberschriften behoben werden.

data-sort-type="..." kann viele verschiedene Werte verarbeiten. Die am meisten genutzten sind:

• text – Für Text
• number – Für Zahlen (auch mit Punkten, Kommata, Leerzeichen, „+“ oder „-“)
• currency – Für Zahlen mit $, £, €, oder ¥ davor (zum Beispiel: €100)
• date – Für Daten

Beachte, dass alle Werte in den Zellen der entsprechenden Spalte dem angegeben Typ entsprechen müssen.

Beispiel:

{| class="article-table sortable"
! Standard
! data-sort-type="number" | Zahl
! data-sort-type="currency" | Währung
|-
| !@#$%
| 10
| $23
|-
| 10000
| 20
| ¥54
|-
| Apfel
| 100
| £345
|-
| Banane
| 200
| €999
|}

Ergibt:

Standard	Zahl	Währung
!@#$%	10	$23
10000	20	¥54
Apfel	100	£345
Banane	200	€999

data-sort-value

Manchmal entspricht das in einer Spalte gezeigte nicht dem, wonach du sortieren möchtest. In solchen Fällen kann data-sort-value="..." benutzt werden.

Beispiel 1:

{| class="article-table sortable"
! Konsole
! Farbe
! Anzahl
|-
| Dreamcast
| Weiß
| data-sort-value="5" | Fünf
|-
| iPad
| Weiß
| data-sort-value="0" | Null
|-
| Xbox
| Grün
| data-sort-value="8" | Acht
|}

Ergibt:

Konsole	Farbe	Anzahl
Dreamcast	Weiß	Fünf
iPad	Weiß	Null
Xbox	Grün	Acht

Beispiel 2:

{| class="article-table sortable" style="width: 500px;"
! data-sort-type="text" scope="col" |Frucht
! data-sort-type="currency" scope="col" |Durchschnittspreis ($USD)
! data-sort-type="number" scope="col" style="width:100px" |Handelswert in Äpfeln
! data-sort-type="number" scope="col" style="width:100px" |Handelswert in Zitronen
|-
|data-sort-value="Ananas"| [[file:pineappleexample.png|30px]]<br />Ananas
|$3.00
|data-sort-value="15"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="7.5"|[[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:halflemonexample.png|10px]]
|-
|data-sort-value="Apfel"| [[file:appleexample.png|30px]]<br />Apfel
|$0.20
|data-sort-value="1"|N/A
|data-sort-value="0.5"|[[file:halflemonexample.png|10px]]
|-
|data-sort-value="Zitrone"| [[file:lemonexample.png|30px]]<br />Zitrone
|$0.40
|data-sort-value="2"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="1"|N/A
|-
|data-sort-value="Kokosnuss"| [[file:coconutexample.png|30px]]<br />Kokosnuss
|$1.40
|data-sort-value="7"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="3.5"|[[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:halflemonexample.png|10px]]
|}

Ergibt:

Frucht	Durchschnittspreis ($USD)	Handelswert in Äpfeln	Handelswert in Zitronen
Ananas	$3.00
Apfel	$0.20	N/A
Zitrone	$0.40		N/A
Kokosnuss	$1.40

Datumswerte

{| class="article-table sortable"
|-
! data-sort-type="date" | Tag, Monat, Jahr
|-
| 21. Dez. 1905
|-
| 17. Jan. 1950
|-
| 1. Jan. 1950
|-
| 14. Mai. 2014
|-
| 8. Aug. 1966
|}

Ergibt:

Tag, Monat, Jahr
21. Dez. 1905
17. Jan. 1950
1. Jan. 1950
14. Mai. 2014
8. Aug. 1966

Spalten von der Sortierung ausschließen

Wenn du bestimmte Spalten nicht sortierbar machen willst, kannst du dies durch Hinzufügen der Klasse „unsortable“ zu ihrer Überschrift umsetzen.

Beispiel:

{| class="article-table sortable"
|-
! Spiel
! Art
! class="unsortable" | Bewertung
|-
| Minecraft
| Sandbox
| ☆☆
|-
| League of Legends
| MOBA
| ☆☆☆
|-
| Call of Duty
| Shooter
| ☆
|}

Ergibt:

Spiel	Art	Bewertung
Minecraft	Sandbox	☆☆
League of Legends	MOBA	☆☆☆
Call of Duty	Shooter	☆

Zeilen von der Sortierung ausschließen

Wenn du eine Zeile am Ende der Tabelle von der Sortierung ausschließen willst (beispielsweise eine Ergebnis-Zeile), kannst du dies durch Hinzufügen von class="sortbottom" zu der Zeile tun.

Beispiel:

{| class="article-table sortable"
! Name
! Geschlecht
! Alter
|-
| Amanda
| Weiblich
| 18
|-
| Bill
| Männlich
| 23
|-
| Cathryn
| Männlich
| 34
|- class="sortbottom"
! colspan="2" | Durchschnitt
| 25
|}

Ergibt:

Name	Geschlecht	Alter
Amanda	Weiblich	18
Bill	Männlich	23
Cathryn	Männlich	34
Durchschnitt		25

Siehe auch

• Hilfe:Tabellen
• Hilfe:Tabellen für Fortgeschrittene in der Wikipedia

Hilfe und Feedback

• Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
• Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
• Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
• Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
• Um Fehler zu melden, kontaktiere bitte einen Ansprechpartner oder nutze das entsprechende Kontaktformular.