Hilfe:Tabellen: Unterschied zwischen den Versionen

Aus InkluPedia
(prettytable -> wikitable)
(+)
Zeile 84: Zeile 84:




Mit <code>class="wikitable"</code> bekommt die Tabelle und bekommen die Zellen einen Rahmen.
Mit <code>class="wikitable"</code> bekommen die Tabelle und die darin enthaltenen Zellen jeweils einen Rahmen.


Tabellenzellen können mit <code>colspan</code> (für ''column span'') über mehrere Spalten und mit <code>rowspan</code> (für ''row span'') über mehrere Zeilen verbunden werden.
Tabellenzellen können mit <code>colspan</code> (für ''column span'') über mehrere Spalten und mit <code>rowspan</code> (für ''row span'') über mehrere Zeilen verbunden werden.
Zeile 138: Zeile 138:




Mit <code>class="wikitable sortable"</code> ist eine sortierbare Tabelle möglich. Einzelne Spalten kann man mit <code>class="unsortable"|Spaltenüberschrift</code> von der Sortierung ausnehmen.


Mit <code>align="left"</code> (linksbündig), <code>align="center"</code> (Standard, zentriert) oder <code>align="right"</code> (rechtsbündig) kann der Text in der '''Kopfzeile''' der Tabelle positioniert werden.
Mit <code>align="left"</code> (linksbündig), <code>align="center"</code> (Standard, zentriert) oder <code>align="right"</code> (rechtsbündig) kann der Text in der '''Kopfzeile''' der Tabelle positioniert werden.
Zeile 146: Zeile 145:
<div style="float:left;">
<div style="float:left;">
<pre style="white-space: pre nowrap">
<pre style="white-space: pre nowrap">
{| class="wikitable sortable"
{| class="wikitable"
  |- align="center"
  |- align="center"
   ! Obst
   ! Obst
Zeile 168: Zeile 167:
<div style="clear:left;"></div>
<div style="clear:left;"></div>
ergibt:
ergibt:
{| class="wikitable sortable"
{| class="wikitable"
  |- align="center"
  |- align="center"
   ! Obst
   ! Obst
Zeile 301: Zeile 300:
  | Groß
  | Groß
|}
|}
== Sortierung ==
In einer Tabelle, bei der eine oder mehrere Spalten sortierbar sind, werden in der Kopfzeile in den sortierbare(n) Spalte(n)) rechts außen kleine <span style="white-space:nowrap">Doppelpfeile [[File:Sort_both_small.svg|11px|verweis=]]</span> angezeigt. Die Sortierung einer Spalte wird ausgelöst, indem die entsprechende Kopfzelle angeklickt wird, die ausgewählte Spalte wird nun aufsteigend ([[File:Sort_up_small.svg|11px|alt=|Aufsteigend sortiert|verweis=]]) sortiert. Bei einem erneuten Klick auf die entsprechende Kopfzelle wird absteigend ([[File:Sort_down_small.svg|11px|alt=|Absteigend sortiert|verweis=]]) sortiert.
Mit <code>class="wikitable sortable"</code> wird eine sortierbare Tabelle erzeugt. Darin kann für eine einzene Spalte mit <code>class="unsortable"|''Spaltenname''</code> eine Sortiermöglichkeit entfernt werden.
<div style="float:left;">
<pre style="white-space: pre nowrap">
{| class="wikitable sortable"
|- align="center"
  ! Obst
  ! class="unsortable"|Eigenschaft
  ! Menge
|- align="left"
  | Birne
  | Klein
  | 5
|- align="center"
  | Apfel
  | Groß
  | 3
|- align="right"
  | Orange
  | Klein
  | 8
|}
</pre>
</div>
<div style="clear:left;"></div>
ergibt:
{| class="wikitable sortable"
|- align="center"
  ! Obst
  ! class="unsortable"|Eigenschaft
  ! Menge
|- align="left"
  | Birne
  | Klein
  | 5
|- align="center"
  | Apfel
  | Groß
  | 3
|- align="right"
  | Orange
  | Klein
  | 8
|}
Einer Kopfzelle kann der Datentyp wie etwa ''Datum'' für die Spalte darunter mit <code>data-sort-type="''Schlüsselwort''"</code> ausdrücklich zugewiesen werden.
{| class="wikitable sortable"
! Datentyp || style="width:13em;"|Schlüsselwort || class="unsortable"|Hinweise
|-
| Datum || data-sort-type="date" || Zur Sortierung von Kalendertagen.
|-
| IP-Adresse || data-sort-type="IPAddress" || Zur Sortierung von IPv4-Adressen.
|-
| ISO-Datum || data-sort-type="isoDate" || Zur Sortierung von Kalendertagen. Auch nach Uhrzeit bis hin zur Zeitzone sowie in der Antike (vor dem Jahr 100).
|-
| Text || data-sort-type="text" || Zur alphabetischen Sortierung von Text.
|-
| US-Datum || data-sort-type="usLongDate" || Zur Sortierung von US-amerikanischen Kalendertagen. Da in einem deutschsprachigen [[Wiki]] deutschsprachige Monatsnamen verwendet werden müssen, hier praktisch unbrauchbar.
|-
| Währung || data-sort-type="currency" || Früher zur Sortierung von Zahlen mit Währungsangaben. Geht mit dem Datentyp für ''Text'' mitterweile besser.
|-
| Zahl || data-sort-type="number" || Zur Sortierung einer numerischen Abfolge (Dezimalbrüche).
|-
| Zeit || data-sort-type="time" || Zur Sortierung von Uhrzeit oder Zeitspanne (Dauer) auf Minuten.
|}


== Werkzeuge ==
== Werkzeuge ==

Version vom 11. Juni 2022, 10:29 Uhr

In der MediaWiki-Syntax beginnt jede Tabelle mit einer offenen geschweiften Klammer { gefolgt von einem senkrechten Strich (Pipe-Zeichen) | und endet mit einem Strich | gefolgt von einer geschlossenen geschweiften Klammer }.

Zur Formatierung einer Tabelle lassen sich sowohl für die gesamte Tabelle als auch für einzelne Zellen HTML-Attribute angeben. Insbesondere kann dazu das style-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.

Mit der Klasse "wikitable" kann eine vorformatierte Standardtabelle, bei der bereits einige Stilelemente für Rahmen, Farbgebung, Innen- und Außenabstände festgelegt sind, ausgewählt werden. Darauf aufbauend können weitere Eigenschaften konfiguriert werden. Die Klasse "prettytable" ist zu "wikitable" inkompatibel, veraltet und war in der Wikipedia bis 2008 ein Sonderweg der deutschsprachigen Wikipedia.

Einfache Tabellen

Einfache transparente Tabellen lassen sich wie in folgenden Beispielen erstellen.

Quelltext:

Zwei Zeilen

{|
 |-
 | Zelle 1
 |-
 | Zelle 2
|}

Zwei Spalten

{|
 |-
 | Zelle 1
 | Zelle 2
|}

Zwei Spalten alternativ

{|
 |-
 | Zelle 1 || Zelle 2
|}

Zwei Zeilen und zwei Spalten

{|
 |-
 | Zelle 1/1
 | Zelle 2/1
 |-
 | Zelle 1/2
 | Zelle 2/2
|}

Zwei Spalten mit Spaltenüberschrift

{|
 ! Überschrift 1 !! Überschrift 2
 |-
 | Zelle 1 || Zelle 2
|}

Zwei Spalten mit Spaltenüberschrift und Tabellenüberschrift

{|
 |+Tabellenüberschrift
 |-
 | Zelle 1
 |-
 | Zelle 2
|}



Mit class="wikitable" bekommen die Tabelle und die darin enthaltenen Zellen jeweils einen Rahmen.

Tabellenzellen können mit colspan (für column span) über mehrere Spalten und mit rowspan (für row span) über mehrere Zeilen verbunden werden.

Quelltext:

{| class="wikitable"
 ! colspan="3"| Obst
 |-
 | Apfel || Birne || Zitrone
|}
{| class="wikitable"
 ! rowspan="4"| Obst:
 |-
 | Apfel
 |-
 | Birne
 |-
 | Zitrone
|}

ergibt:

Obst
Apfel Birne Zitrone
Obst:
Apfel
Birne
Zitrone


Mit align="left" (linksbündig), align="center" (Standard, zentriert) oder align="right" (rechtsbündig) kann der Text in der Kopfzeile der Tabelle positioniert werden.

Mit align="left" (linksbündig, Standard), align="center" (zentriert) oder align="right" (rechtsbündig) kann der Text in der Tabellenzelle positioniert werden.

{| class="wikitable"
 |- align="center"
  ! Obst
  ! class="unsortable"|Eigenschaft
  ! Menge
 |- align="left"
  | Birne
  | Klein
  | 5
 |- align="center"
  | Apfel
  | Groß
  | 3
 |- align="right"
  | Orange
  | Klein
  | 8
|}

ergibt:

Obst Eigenschaft Menge
Birne Klein 5
Apfel Groß 3
Orange Klein 8


Tabellenhintergrundfarben

Mit class="wikitable" sind folgende Tabellenhintergrundfarben möglich. Diese sind in https://inklupedia.de/wiki/MediaWiki:Common.css definiert:

Hintergrundfarbe Hex-Wert
hintergrundfarbe1 (Standard) #f8f9fa
hintergrundfarbe2 #fff
hintergrundfarbe3 #ffff40
hintergrundfarbe4 #fa0
hintergrundfarbe5 #eaecf0
hintergrundfarbe6 #b3b7ff
hintergrundfarbe7 #ffcbcb
hintergrundfarbe8 #ffebad
hintergrundfarbe9 #b9ffc5


Mit class="zebra wikitable" wird eine abwechselnde Tabellenhintergrundfarbe generiert. Zebra ist in https://inklupedia.de/wiki/MediaWiki:Common.css definiert:

Überschrift
Zeile 1, Hintergrundfarbe weiß
Zeile 2, Hintergrundfarbe grau
Zeile 3, Hintergrundfarbe weiß
Zeile 4, Hintergrundfarbe grau
Zeile 5, Hintergrundfarbe weiß


Mit bgcolor="#nnnnnn" (Beispielsweise bgcolor="#0099ff" für tiefes blau, bgcolor="#f8f8ff" für helles blau und bgcolor="ff0000" für rot) wird die Hintergrundfarbe mit dem Hexadezimalwert der Farbe abweichend vom Standard festgelegt. Farbtabellen und ggf. Umrechner gibt es zum Beispiel unter https://www.farbtabelle.at/ , https://html-color-codes.info/webfarben_hexcodes/ und http://www.rechnr.de/farbenrechner

Überschrift 1 Überschrift 2
Birne Klein
Apfel Groß


Einklappbare/ausklappbare Tabellen

Mit class="mw-collapsible" ist eine einklappbare Tabelle möglich:

Überschrift 1 Überschrift 2
Birne Klein
Apfel Groß


Mit class="mw-collapsible mw-collapsed" ist eine aufklappbare Tabelle möglich:

Überschrift 1 Überschrift 2
Birne Klein
Apfel Groß


Mit class="mw-collapsible sortable" ist eine einklappbare sortierbare Tabelle möglich:

Überschrift 1 Überschrift 2
Birne Klein
Apfel Groß


Mit class="mw-collapsible mw-collapsed sortable wikitable" ist eine ausklappbare sortierbare Tabelle im wikitable Style möglich:

Überschrift 1 Überschrift 2
Birne Klein
Apfel Groß


Sortierung

In einer Tabelle, bei der eine oder mehrere Spalten sortierbar sind, werden in der Kopfzeile in den sortierbare(n) Spalte(n)) rechts außen kleine Doppelpfeile angezeigt. Die Sortierung einer Spalte wird ausgelöst, indem die entsprechende Kopfzelle angeklickt wird, die ausgewählte Spalte wird nun aufsteigend () sortiert. Bei einem erneuten Klick auf die entsprechende Kopfzelle wird absteigend () sortiert.


Mit class="wikitable sortable" wird eine sortierbare Tabelle erzeugt. Darin kann für eine einzene Spalte mit class="unsortable"|Spaltenname eine Sortiermöglichkeit entfernt werden.

{| class="wikitable sortable"
 |- align="center"
  ! Obst
  ! class="unsortable"|Eigenschaft
  ! Menge
 |- align="left"
  | Birne
  | Klein
  | 5
 |- align="center"
  | Apfel
  | Groß
  | 3
 |- align="right"
  | Orange
  | Klein
  | 8
|}

ergibt:

Obst Eigenschaft Menge
Birne Klein 5
Apfel Groß 3
Orange Klein 8


Einer Kopfzelle kann der Datentyp wie etwa Datum für die Spalte darunter mit data-sort-type="Schlüsselwort" ausdrücklich zugewiesen werden.

Datentyp Schlüsselwort Hinweise
Datum data-sort-type="date" Zur Sortierung von Kalendertagen.
IP-Adresse data-sort-type="IPAddress" Zur Sortierung von IPv4-Adressen.
ISO-Datum data-sort-type="isoDate" Zur Sortierung von Kalendertagen. Auch nach Uhrzeit bis hin zur Zeitzone sowie in der Antike (vor dem Jahr 100).
Text data-sort-type="text" Zur alphabetischen Sortierung von Text.
US-Datum data-sort-type="usLongDate" Zur Sortierung von US-amerikanischen Kalendertagen. Da in einem deutschsprachigen Wiki deutschsprachige Monatsnamen verwendet werden müssen, hier praktisch unbrauchbar.
Währung data-sort-type="currency" Früher zur Sortierung von Zahlen mit Währungsangaben. Geht mit dem Datentyp für Text mitterweile besser.
Zahl data-sort-type="number" Zur Sortierung einer numerischen Abfolge (Dezimalbrüche).
Zeit data-sort-type="time" Zur Sortierung von Uhrzeit oder Zeitspanne (Dauer) auf Minuten.


Werkzeuge

Mit dem Tool "Copy & Paste Excel-to-Wiki Converter" besteht die Möglichkeit, eine Tabelle aus einer beliebigen Tabellenkalkulation (mit LibreOffice Calc getestet) per copy & paste in "Wikicode" per Knopfdruck umzuwandeln. Die Spalten sind dann aber noch nicht sortierbar und müssen bei Bedarf noch entsprechend angepasst werden. Das Tool steht unter https://excel2wiki.toolforge.org/ auch als PHP-Script für die Offlinenutzung zur Verfügung. Unter https://tools.wmflabs.org/excel2wiki/ und http://www.hifi-remote.com/excel2wiki/index.php gibt es Online-Versionen des Tools. Alternativ steht mit tab2wiki unter https://tools.wmflabs.org/magnustools/tab2wiki.php ein weiteres PHP-Script für die Onlinenutzung zur Verfügung.

Mit dem Onlinegenerator unter https://www.tablesgenerator.com/mediawiki_tables können Tabellen direkt online im Browser erstellt werden. Der Generator unterstützt verbundene Zellen.