Hilfe:Tabellen: Unterschied zwischen den Versionen

Aktuelle Version vom 28. Juli 2024, 09:35 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

Tabellen nebeneinander

Mit style="float:…;" können Tabellen nebeneinander und rechtsbündig (float:right) oder linksbündig (float:left) angelegt werden. Bei Verwendung von style="float:…;" sollte immer auch ein Abstand margin-…: angegeben werden, damit die Tabellen nicht direkt nebeneinander liegen sondern der angegebene Abstand dazwischen liegt. Um den Textumfluss zu beenden, kann zum Beispiel <div style="clear: both;"></div> unter der letzten Tabelle verwendet werden.

Beispiel für zwei Tabellen linksbündig nebeneinander mit Abstand von 1em:

{| class="wikitable" style="float:left; margin-right:1em;"
 |+ Tabelle 1
 |-
 ! Kopfzelle !! Kopfzelle
 |-
 | Inhaltszelle || Inhaltszelle
|}
{| class="wikitable" style="float:left;"
 |+ Tabelle 2
 |-
 ! Kopfzelle !! Kopfzelle
 |-
 | Inhaltszelle || Inhaltszelle
|}

ergibt:

Tabelle 1
Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

Tabelle 2
Kopfzelle	Kopfzelle
Inhaltszelle	Inhaltszelle

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 ausklappbare 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ß

Feststehende Kopfzeile

Eine feststehende Kopfzeile ist mit style="position: sticky; top: 0;" möglich. Das ist z. B. sinnvoll bei großen Tabellen, die weit nach unten über den Bildschirm hinausgehen.

{| class="wikitable"
 |- style="position: sticky; top: 0;"
 ! Folgen-Nr. !! Folgenname !! Erstausstrahlung
 |-
 | 1 || Herzlich willkommen || 8. Dezember 1985 
 |-
 ...
 |-
 | 1758 || Auf Wiedersehen || 29. März 2020
|}

Textausrichtung

Der Inhalt der Kopfzeile und der Inhaltszellen lässt sich bei Bedarf ausrichten.

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 Inhaltszelle positioniert werden.

{| class="wikitable"
 |- align="center"
  ! Obst
  ! 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

Mit toptextcells wird der Inhalt der Inhaltszellen vertikal so ausgerichtet, dass dieser am oberen Rand der jeweiligen Zelle stehen.

Mit style="vertical-align:top;" | kann die Ausrichtung an den oberen Rand für eine Kopfzelle umgesetzt werden.

{| class="wikitable toptextcells"
 ! Art !! style="vertical-align:top;" | Lebensmittel !! An-<br />zahl
 |-
 | Gemüse || Blumen-<br />kohl || 5
|}

Im Vergleich dazu die normale Tabelle ohne spezielle Ausrichtung:
{| class="wikitable"
 ! Art !! Lebensmittel !! An-<br />zahl
 |-
 | Gemüse || Blumen-<br />kohl || 5
|}

ergibt:

Art	Lebensmittel	An- zahl
Gemüse	Blumen- kohl	5

Im Vergleich dazu die normale Tabelle ohne spezielle Ausrichtung:

Art	Lebensmittel	An- zahl
Gemüse	Blumen- kohl	5

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 (Datei:Sort down small.svg) sortiert.

Mit class="wikitable sortable" wird eine sortierbare Tabelle erzeugt. Darin kann für einzelne Spalten die Sortiermöglichkeit mit class="unsortable"|Spaltenname 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.

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 blau, bgcolor="#ffff00" für gelb und bgcolor="ff0000" für rot) kann die Hintergrundfarbe in den Tabellenzellen (aber nicht in den Überschriften) mit dem Hexadezimalwert der Farbe abweichend vom Tabellenstandard festgelegt werden. 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
Kürbis	Riesig
Birne	Klein
Apfel	Groß

Spaltenbreite / Tabellenbreite

Die Spaltenbreite kann optional definiert werden. Das kann als Angabe in % (Prozent) als Anteil an der Gesamtbreite der Tabelle oder mit festen Werten px (Pixel) oder em (Maßeinheit im Schriftsatz) erfolgen. Die Definition mit px sollte nur bei Spalten mit Grafiken verwendet werden. Für Text sollte die Definition mit em erfolgen. 1em entspricht ungefähr der Breite des Großbuchstabens „M“ in der umgebenden Schriftgröße. Grundsätzlich ist es besser, wenn die Webbrowser Tabellen dynamisch nach den Gegebenheiten (Bildschirmauflösung, Schriftart) verteilen. Eine vordefinierte Festlegung macht z. B. dann Sinn, wenn mehrere Tabellen gleicher Art in der Seite vorkommen und diese die gleiche Darstellung haben sollen. Für die breiteste Spalte sollte kein Wert explizit vorgegeben werden, sondern die Webbrowser sollten deren Breite selbst errechnen.

Auch für die komplette Tabelle lässt sich die Breite festlegen. Mit style="width:100%" wird die vollständige Bildschirmbreite genutzt, falls möglich. Mit style="min-width: 200px" (oder mit em) lässt sich die minimale Breite und mit style="max-width: 300px" (oder mit em) lässt sich die maximale Breite vorgeben.

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" mit 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. Weitere Onlinegeneratoren gibt es unter https://tableconvert.com/mediawiki-generator und https://table.6cm.co/mediawiki_tables