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.