Hilfe:Tabellen: Unterschied zwischen den Versionen
K
t
(+) |
K (t) |
||
| (18 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
In der [[MediaWiki]]-Syntax beginnt jede Tabelle mit einer offenen geschweiften Klammer <code>'''{'''</code> gefolgt von einem senkrechten Strich (Pipe-Zeichen) <code>'''<nowiki>|</nowiki>'''</code> und endet mit einem Strich <code>'''<nowiki>|</nowiki>'''</code> gefolgt von einer geschlossenen geschweiften Klammer <code>'''}'''</code>. | |||
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 <code>style</code>-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 Tabellen == | ||
Einfache transparente Tabellen lassen sich wie in folgenden Beispielen erstellen | Einfache transparente Tabellen lassen sich wie in folgenden Beispielen erstellen. | ||
'''Quelltext:''' | '''Quelltext:''' | ||
| Zeile 78: | Zeile 84: | ||
Mit <code>class="wikitable"</code> | 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 132: | Zeile 138: | ||
Mit <code> | == Feststehende Kopfzeile == | ||
Eine feststehende Kopfzeile ist mit <code>style="position: sticky; top: 0;"</code> möglich. Das ist z. B. sinnvoll bei großen Tabellen, die weit nach unten über den Bildschirm hinausgehen. | |||
<div style="float:left;"> | |||
<pre style="white-space: pre nowrap"> | |||
{| class="wikitable" | |||
|- style="position: sticky; top: 0;" | |||
! Folgen-Nr. !! Folgenname !! Erstausstrahlung | |||
|- | |||
| 1 || Herzlich willkommen || 8. Dezember 1985 | |||
|- | |||
... | |||
|- | |||
| 1758 || Auf Wiedersehen || 29. März 2020 | |||
|} | |||
</pre> | |||
</div> | |||
<div style="clear:left;"></div> | |||
== Textausrichtung == | |||
Der Inhalt der Kopfzeile und der Inhaltszellen lässt sich bei Bedarf ausrichten. | |||
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, Standard), <code>align="center"</code> (zentriert) oder <code>align="right"</code> (rechtsbündig) kann der Text in der '''Inhaltszelle''' positioniert werden. | |||
<div style="float:left;"> | <div style="float:left;"> | ||
<pre style="white-space: pre nowrap"> | <pre style="white-space: pre nowrap"> | ||
{| class=" | {| class="wikitable" | ||
|- align="center" | |- align="center" | ||
! Obst | ! Obst | ||
| Zeile 158: | Zeile 189: | ||
<div style="clear:left;"></div> | <div style="clear:left;"></div> | ||
ergibt: | ergibt: | ||
{| class=" | {| class="wikitable" | ||
|- align="center" | |- align="center" | ||
! Obst | ! Obst | ||
| Zeile 178: | Zeile 209: | ||
Mit <code>class="wikitable sortable"</code> | Mit <code>toptextcells</code> wird der Inhalt der Inhaltszellen vertikal so ausgerichtet, dass dieser am oberen Rand der jeweiligen Zelle stehen. | ||
Mit <code>style="vertical-align:top;" |</code> kann die Ausrichtung an den oberen Rand für eine Kopfzelle umgesetzt werden. | |||
<div style="float:left;"> | |||
<pre style="white-space: pre nowrap"> | |||
{| 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 | |||
|} | |||
</pre> | |||
</div> | |||
<div style="clear:left;"></div> | |||
ergibt: | |||
{| 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 | |||
|} | |||
== 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 einzelne Spalten die Sortiermöglichkeit mit <code>class="unsortable"|''Spaltenname''</code> entfernt werden. | |||
<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 sortable" | ||
|- align="center" | |- align="center" | ||
! Obst | |||
! class="unsortable"|Eigenschaft | |||
! Menge | |||
|- align="left" | |||
| Birne | | Birne | ||
| Klein | | Klein | ||
| 5 | |||
|- align="center" | |- align="center" | ||
| Apfel | | Apfel | ||
| Groß | | Groß | ||
| 3 | |||
|- align="right" | |||
| Orange | |||
| Klein | |||
| 8 | |||
|} | |} | ||
</pre> | </pre> | ||
| Zeile 197: | Zeile 274: | ||
<div style="clear:left;"></div> | <div style="clear:left;"></div> | ||
ergibt: | ergibt: | ||
{| class="wikitable sortable" | {| class="wikitable sortable" | ||
|- align="center" | |- align="center" | ||
! Obst | |||
! class="unsortable"|Eigenschaft | |||
! Menge | |||
|- align="left" | |||
| Birne | | Birne | ||
| Klein | | Klein | ||
| 5 | |||
|- align="center" | |- align="center" | ||
| Apfel | | Apfel | ||
| Groß | | 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. | |||
|} | |} | ||
| Zeile 253: | Zeile 360: | ||
Mit <code>bgcolor="#nnnnnn"</code> (Beispielsweise <code>bgcolor="#0099ff"</code> für | Mit <code>bgcolor="#nnnnnn"</code> (Beispielsweise <code>bgcolor="#0099ff"</code> für blau, <code>bgcolor="#ffff00"</code> für gelb und <code>bgcolor="ff0000"</code> 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 | ||
{| class=" | {| class="wikitable" | ||
|- align="center | |- align="center" | ||
! Überschrift 1 | ! Überschrift 1 | ||
! Überschrift 2 | ! Überschrift 2 | ||
|- align="center" bgcolor="# | |- align="center" bgcolor="#0099ff" | ||
| Kürbis | |||
| Riesig | |||
|- align="center" bgcolor="#ffff00" | |||
| Birne | | Birne | ||
| Klein | | Klein | ||
| Zeile 283: | Zeile 393: | ||
Mit <code>class="mw-collapsible mw-collapsed"</code> ist eine | Mit <code>class="mw-collapsible mw-collapsed"</code> ist eine ausklappbare Tabelle möglich: | ||
{| class="mw-collapsible mw-collapsed" | {| class="mw-collapsible mw-collapsed" | ||
|- align="center" | |- align="center" | ||
| Zeile 298: | Zeile 408: | ||
Mit <code>class="mw-collapsible sortable"</code> ist eine einklappbare sortierbare Tabelle möglich: | Mit <code>class="mw-collapsible sortable"</code> ist eine einklappbare sortierbare Tabelle möglich: | ||
{| class="mw-collapsible | {| class="mw-collapsible sortable" | ||
|- align="center" | |- align="center" | ||
! Überschrift 1 | ! Überschrift 1 | ||
| Zeile 323: | Zeile 433: | ||
| Groß | | Groß | ||
|} | |} | ||
== Spaltenbreite / Tabellenbreite == | |||
Die Spaltenbreite kann optional definiert werden. Das kann als Angabe in <code>%</code> (Prozent) als Anteil an der Gesamtbreite der Tabelle oder mit festen Werten <code>px</code> (Pixel) oder <code>em</code> (Maßeinheit im Schriftsatz) erfolgen. Die Definition mit <code>px</code> sollte nur bei Spalten mit Grafiken verwendet werden. Für Text sollte die Definition mit <code>em</code> erfolgen. <code>1em</code> 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 <code>style="width:100%"</code> wird die vollständige Bildschirmbreite genutzt, falls möglich. Mit <code>style="min-width: 200px"</code> (oder mit <code>em</code>) lässt sich die minimale Breite und mit <code>style="max-width: 300px"</code> (oder mit <code>em</code>) lässt sich die maximale Breite vorgeben. | |||
== Werkzeuge == | == 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 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. | 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 | ||
[[Kategorie:Hilfe]] | [[Kategorie:Hilfe]] | ||