Hilfe:Tabellen/mehr

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de

Wechseln zu: Navigation, Suche
< Hilfe:Tabellen

Diese Seite vermittelt Hintergrundwissen über die Erstellung von Tabellen in einem MediaWiki-Wiki. - Praktische Beispiele mit angezeigtem Quellcode und Erläuterungen stehen auf der Seite Hilfe:Tabellen.

Inhaltsverzeichnis

Formatierung von Zellen, Zeilen und Spalten

Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabelle als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Insbesondere kann das style-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Zwar lassen sich auch einzelne Zeilen einer Tabelle formatieren, möchte man jedoch ein Attribut an eine bestimmte Spalte vergeben, so muss dies zellenweise geschehen.

CSS-Klassen für Tabellen

Um Tabellen sowohl in ihren Inhalten als auch bereits im Kopfbereich weitestgehend frei von Elementen zu halten, die die Darstellungsweise betreffen, wurden für das global wirksame CSS einige Klassen entwickelt, die es erlauben, wichtige Stile mit wenigen anschaulichen Anweisungen festzulegen.

wikitable

Mittels class="wikitable" im Tabellenkopf lässt sich eine schwach grau getönte Tabelle mit sichtbaren, wenngleich dezenten Zellgrenzen erstellen. Zwischen Zellinhalt und Rand wird etwas "Luft" gelassen. Die Standardtabelle ist rahmenlos und hat weißen Hintergrund, was für Layout-Zwecke teilweise erwünscht ist, sich jedoch in bestimmten Fällen zu schlecht vom Text absetzt.

sortable

Mittels class="sortable" werden Spalten sortierbar gemacht. Das heißt, wenn JavaScript für das Wiki aktiviert ist, können Tabellen durch Klick auf das entsprechende Symbol in einem Spaltenkopf nach dieser Spalte auf- und absteigend sortiert werden. Die mitunter unsortierte Ausgangs-Darstellung erhält man durch Neuladen der Seite. Einzelne Spalten, für die eine Sortierung als unsinnig angesehen wird, können mittels der spaltenweisen Angabe von class="unsortable" markiert werden, so werden die Sortierfunktion und -symbol unterdrückt. Mit der gleichen Angabe können auch einzelne Tabellenzeilen von der Sortierung ausgenommen werden.

toptextcells

Durch class="toptextcells" im Tabellenkopf kann das Standardverhalten, dass Texte in Zellen vertikal zentriert dargestellt werden, dahingehend abgeändert werden, dass die Texte immer oben beginnen und der Abstand jeweils nach unten variiert. In Fällen stark unterschiedlicher Auffüllung führt dies zu einer größeren Übersicht, die obere Textzeile bildet mit der oberen Begrenzung zusammen eine Flucht. Die Alternative zu dieser Klasse wäre die Einfügung von style-Anweisungen pro Tabellenzeile.

Kombinationen

Die genannten drei Klassen lassen sich kombinieren. Hierbei sollte Augenmaß gewahrt werden, nicht jede Eigenschaft ist immer passend. Sortierbare Wikitables (class="wikitable sortable") werden sich häufig anbieten. Oben ausgerichtete Texte in Zellen werden häufig mit Wikitable kombiniert werden.

Auch Kombinationen aller drei Stile sind denkbar, wenn in Tabellen umfangreiche Erläuterungen enthalten sind, diese sollten dann als unsortable markiert werden.

Probleme mit der class="wikitable"

Tipp
Mit der Eigenschaft text-indent und einem Wert so um die 4px bekommt man einen ganz vernünftigen Abstand zum linken Rand hin. Wenn das hinter der Klasse "wikitable sortable" oder "wikitable" notiert wird, bezieht sich diese Zuweisung auf alle Zellen. So könnte die erste Zeile einer Tabelle aussehen: {| class="wikitable sortable" style="text-indent:4px"


Ausrichtung der Tabelle

Ausrichtung der Tabelle 

ab hier aus der Wikipedia: funktioniert hier nicht!

Normalerweise werden Tabellen in Artikeln linksbündig ohne Textumfluss dargestellt. Um Tabellen rechtsbündig oder mit Textumfluss darzustellen, können folgende CSS-Klassen genutzt werden.

Linksbündig mit Textumfluss
Name Vorname Nachname
Müller, BerndBernd Müller Bernd Müller
Zehnder, HansHans Zehnder Hans Zehnder
Ackermann, StefanStefan Ackermann Stefan Ackermann
Rechtsbündig mit Textumfluss
Name Vorname Nachname
Müller, BerndBernd Müller Bernd Müller
Zehnder, HansHans Zehnder Hans Zehnder
Ackermann, StefanStefan Ackermann Stefan Ackermann 
bis hier aus der Wikipedia

Mit der Klasse „float-left“ (class="wikitable float-left") kann eine Tabelle linksbündig mit Textumfluss dargestellt werden. Analog dazu kann mit der Klasse „float-right“ (class="wikitable float-right") eine Tabelle rechtsbündig mit Textumfluss dargestellt werden. Um den Textumfluss zu beenden, das heißt zu verhindern, dass die Tabelle in den nächsten Abschnitt rutscht, kann die Vorlage:Absatz genutzt werden (bitte nur mit {{subst:Absatz}} einfügen).

Für die einfache Zentierung einer Tabelle stehen zwei CSS-Klassen zur Verfügung: „centered“ und „center“. Diese unterscheiden sich im Wesentlichen durch die Breite der Tabelle, wobei „centered“ (class="wikitable centered") eine Tabelle nur zentriert und „center“ (class="wikitable center") die Tabelle auf die gesamte verfügbare Breite zieht.

Zentrierte Tabelle
Name Vorname Nachname
Müller, BerndBernd Müller Bernd Müller
Zehnder, HansHans Zehnder Hans Zehnder
Ackermann, StefanStefan Ackermann Stefan Ackermann
Zentrierte Tabelle, die sich über die volle Breite des Artikelbereichs erstreckt
Name Vorname Nachname
Müller, BerndBernd Müller Bernd Müller
Zehnder, HansHans Zehnder Hans Zehnder
Ackermann, StefanStefan Ackermann Stefan Ackermann

Soll die Tabelle rechtsbündig zum Text ausgerichtet werden, lässt sich dies durch die zusätzliche Klasse float-right im Attribut erreichen: class="wikitable float-right". Zentrierung der Tabelle erreicht man durch die zusätzliche Klasse centered: class="wikitable centered".

Standardausrichtung

links rechts
Feld 1 Feld 2


Das schreibt man: 

{| class = "wikitable"
!links
!rechts
|-
|Feld 1
|Feld 2
|}

Rechtsbündig

links rechts
Feld 1 Feld 2


Das schreibt man: 

{| class = "wikitable floatright"
!links
!rechts
|-
|Feld 1
|Feld 2
|}

Zentriert

links rechts
Feld 1 Feld 2


Das schreibt man: 

{| class = "wikitable center"
!links
!rechts
|-
|Feld 1
|Feld 2
|}

Sortierbare Tabelle

Sortierbare Tabellen ermöglichen verschiedene und vom Leser wählbare Sichtweisen auf eine Sache:

ABC Länge Breite Farbe Bemerkung
a 1100 1000 hellblau Blau ist der Himmel
b 30 2 grün Grün ist das Gras
c 100 90 rot Rot ist die Liebe

Diese sortierbare Tabelle wird durch folgenden Code erzeugt: 

{| class="wikitable sortable"
|- class="hintergrundfarbe5"
! ABC !! Länge !! Breite !! Farbe !! class="unsortable" | Bemerkung
|-
| [[a]]
| style="text-align:right" | 1100
| style="text-align:right" | 1000
| hellblau
| Blau ist der Himmel
|-
| [[b]]
| style="text-align:right" | 30
| style="text-align:right" | 2
| grün
| Grün ist das Gras
|-
| [[c]]
| style="text-align:right" | 100
| style="text-align:right" | 90
| rot
| Rot ist die Liebe
|}

Sortierbare Namen

Nach der Namenskonvention steht (in der Wikipedia) zuerst der Vorname, gefolgt vom Nachnamen.
Die Vorlage:SortKeyName sorgt dafür, dass die Tabellenspalten hier dennoch nach dem Nachnamen sortiert werden:

Name Vorname Nachname
Müller, BerndBernd Müller Bernd Müller
Zehnder, HansHans Zehnder Hans Zehnder
Ackermann, StefanStefan Ackermann Stefan Ackermann 
{| class="wikitable sortable"
|- class="hintergrundfarbe5"
! Name !! Vorname !! Nachname
|-
| {{SortKeyName|Bernd|Müller}}
| Bernd
| Müller
|-
| {{SortKeyName|Hans|Zehnder}}
| Hans
| Zehnder
|-
| {{SortKeyName|Stefan|Ackermann}}
| Stefan
| Ackermann
|}

Bei komplizierteren Namen, beispielsweise mit zwei Vornamen oder mit Sonderzeichen im Namen funktioniert Vorlage:SortKey:

Peter Ambrozy 
| {{SortKey|Ambrozy, Peter}}[[Peter Michael Ambrozy|Peter Ambrozy]]

Beispiel: Abgeordnete im Kärntner Landtag

Sortierbare Zahlen und Geldbeträge

Zahlen und Geld-Währungen werden so rechtsbündig und sortierbar dargestellt:

€
sortieren
1,00
2000,10
3.000,02
40.000,00
5,10
1.000.006,01
7000,01 
{| class="wikitable sortable"
|- class="hintergrundfarbe5"
! €<br />sortieren
|-
| style="text-align:right" | 1,00
|-
| style="text-align:right" | 2000,10
|-
| style="text-align:right" | 3.000,02
|-
| style="text-align:right" | 40.000,00
|-
| style="text-align:right" | 5,10
|-
| style="text-align:right" | 1.000.006,01
|-
| style="text-align:right" | 7000,01
|}

Rechtsbündige Zahlen werden nur dann korrekt sortiert, wenn die Anzahl der Nachkommastellen bei allen Einträgen einer Spalte gleich sind.

Siehe auch: Vorlage:Dts für Datumsangaben, Vorlage:Nts und Vorlage:0 für Zahlen

Verschiedenstellige Zahlen

Nummer Ort
033x Brandenburg
0330x Oranienburg und Umgebung
03301 Oranienburg
03302 Hennigsdorf 
| {{SortKey| 033_ | 033x }} || [[Land Brandenburg|Brandenburg]]
|-
| {{SortKey| 0330_ | 0330x }} || Oranienburg und Umgebung

Beispiel: Telefon-Vorwahl 03 (Deutschland)

Sortierbare verschiedenstellige Zahlen mit Dezimaltrennzeichen

Damit bei verschiedenstelligen Zahlen in einer Spalte das Komma immer übereinander dargestellt wird gibt es zwei Möglichkeiten. Beide sind sortierbar. Lösung a) ist angenehmer zu lesen also für Wikipedia geeigneter. Lösung b) ist einfacher zu schreiben und für Zahlen mit immer gleicher Zahl von Nachkommastellen, Währungen beispielsweise, genauso gut geeignet:

a) Verwendung von Vorlage:0 für alle führenden Nullen:

Zähler Wert
1 1000
2 0001,0001
3 0200,2
4 0001,1 
{| class="wikitable sortable"
|- class="hintergrundfarbe5"
! Zähler !! Wert
|-
| 1
| 1000
|-
| 2
| {{0}}{{0}}{{0}}1,0001
|-
| 3
| {{0}}200,2
|-
| 4
| {{0}}{{0}}{{0}}1,1
|}

b) rechtsbündiger Zellenformatierung unter Verwendung der gleichen Anzahl an Nachkommastellen, wobei die zur Ausrichtung künstlich aufgefüllten Nachkommastellen per {{0}} versteckt werden können, ein zu versteckendes Komma ist per {{0|,}} erzielbar:

Zähler Wert
1 1000,0000
2 1,0001
3 200,2000
4 1,1000 
{| class="wikitable sortable"
|- class="hintergrundfarbe5"
! Zähler !! Wert
|-
| 1
| style="text-align:right" | 1000{{0|,}}{{0}}{{0}}{{0}}{{0}}
|-
| 2
| style="text-align:right" | 1,0001
|-
| 3
| style="text-align:right" | 200,2{{0}}{{0}}{{0}}
|-
| 4
| style="text-align:right" | 1,1{{0}}{{0}}{{0}}
|}

Sortierbare Zahl mit Währungs- oder %-Symbol

Zähler Prozent
1 10 %
2 01 %
3 07 %
4 80 % 
{| class="wikitable sortable"
|- class="hintergrundfarbe5"
! Zähler !! Prozent
|-
| 1
| 10 %
|-
| 2
| {{0}}3 %
|-
| 3
| {{0}}7 %
|-
| 4
| 80 %
|}

Sortierbare Tabelle mit einer nicht-sortierbaren Zeile

Name Wert
Alfons 90
Berta 12
Fest 45
Cäsar 37
Dietmar 6 
{| class="wikitable sortable float-right"
|- class="hintergrundfarbe5"
! Name !! Wert
|-
| Alfons
| 90
|-
| Berta
| 12
|- class="unsortable"
| '''Fest'''
| '''45'''
|-
| Cäsar
| 37
|-
| Dietmar
| 6
|}

Layout

Tabellenüberschriften, Trennstriche

Das folgende Beispiel zeigt, wie man eine Tabellenüberschrift erzeugt, sowie eine Möglichkeit, wie sich Trennstriche zwischen bestimmten Zellen realisieren lassen:

Addition von vier Zahlen
365
+ 123
+ 235
+ 277
1000

Der Quelltext dieser Beispieltabelle sieht wie folgt aus: 

{| style="text-align:right;"
|+ Addition von vier Zahlen
|-
| <tt>365</tt>
|-
| <tt>+ 123</tt>
|-
| <tt>+ 235</tt>
|-
| <tt>+ 277</tt>
|-
| style="border-top: 1pt black solid;" | <tt>1000</tt>
|}

Erläuterungen

  • Die Zeile, die mit |+ beginnt, bezeichnet den Titel der Tabelle.
  • Der Befehl border-top: 1pt weist der Zelle einen oberen Rand mit definierter Breite zu. Weitere Befehle sind: border-left, border-right und border-bottom für einen Rand links, rechts oder unten. border: 1pt setzt alle vier Ränder.

Zellfärbung, Spaltenbreite, Textausrichtung

Dieses Beispiel erläutert, wie man sortierbare Tabellen erstellt, wie man Zellen färbt, den Zelleninhalt rechts ausrichtet und die Spaltenbreite einstellt. Es lehnt sich an die Liste der römischen Kaiser an:

Kaiser der Flavischen Dynastie
Kaiser Vollständiger Name Regierungszeit Anmerkungen
Vespasian Titus Flavius Vespasianus 69–79 konsolidierte Verwaltung und Finanzen des Reiches
Titus Titus Flavius Vespasianus Mitte 79–81 eröffnete das Kolosseum in Rom
Domitian Titus Flavius Domitianus 81–96 beendete römische Expansion in Germanien
Saturninus Lucius Antonius Saturninus 89 Gegenkaiser in Germanien, gefallen
Vollst. Liste

Der Quelltext hierfür sieht folgendermaßen aus: 

{| class="wikitable sortable"
|+ style="padding-bottom:1em;" | Kaiser der Flavischen Dynastie
|- class="hintergrundfarbe5"
! width="15%" | Kaiser !! width="30%" | Vollständiger Name
! width="15%" | Regierungszeit !! class="unsortable" width="40%" | Anmerkungen
|-
| [[Vespasian]] || Titus Flavius Vespasianus
| style="text-align:right" | 69–79 || konsolidierte Verwaltung und Finanzen des Reiches
|-
| [[Titus]] || Titus Flavius Vespasianus
| style="text-align:right" | {{SortKey|79-81}}Mitte 79–81 || eröffnete das [[Kolosseum]] in Rom
|-
| [[Domitian]] || Titus Flavius Domitianus
| style="text-align:right" | 81–96 || beendete römische Expansion in Germanien
|-
| [[Lucius Antonius Saturninus|Saturninus]] || Lucius Antonius Saturninus
| style="text-align:right" | 89    || Gegenkaiser in Germanien, gefallen
|- class="sortbottom hintergrundfarbe5"
| '''[[Liste der römischen Kaiser der Antike#Liste der römischen Kaiser|Vollst. Liste]]'''
|
|
|
|}

Erläuterungen

  • Das sortable in class="wikitable sortable" erlaubt die Sortierung der Tabelle nach wählbaren Spalten.
  • Mit class="unsortable" können einzelne Spalten von der Sortierbarkeit ausgenommen werden.
  • Mit den Vorlagen Vorlage:Dts, Vorlage:Nts und Vorlage:SortKey lässt sich die Sortierreihenfolge einzelner Tabelleneinträge beeinflussen
  • Der Befehl width="15%" weist einer Spalte 15 % der Gesamtbreite der Tabelle als Breite zu.
  • Die Ausrichtung von Text rechtsbündig in einer Zelle erreicht man durch die CSS-Anweisung style="text-align:right".
  • Nebeneinanderliegende Zellen kann man sowohl durch das ||-Zeichen trennen, als auch durch einen Zeilenumbruch gefolgt von einem einfachen |-Zeichen.
  • Der Befehl |- class="hintergrundfarbe5" weist der darauffolgenden Zeile eine Hintergrundfarbe zu. In Artikeln sollen die entsprechenden Standardfarben verwendet werden (siehe Farben verwenden in der Hilfe zu Farben). Außerhalb des Artikelnamensraumes können Farben außer durch ihren englischen Namen auch als Hexadezimalzahl aus sechs Ziffern eingegeben werden, wobei die ersten zwei Ziffern für den Rotanteil von bis zu 256 stehen, die nächsten zwei für den Grünanteil und die letzten zwei für den Blauanteil, das heißt, dass #ff0000 die Farbe Rot bedeutet, #00ff00 steht für Grün und #0000ff steht für Blau. Durch eine Mischung erhält man beispielsweise Violett: #ff00ff.
  • Leerzellen können durch einen einfachen Abstand erzeugt werden. Diese Zellen werden aber beim Sortieren an den Anfang gestellt, Leerzellen mit &nbsp; stehen am Ende.
  • Das sortbottom in class="sortbottom hintergrundfarbe5" führt dazu, dass die Zeile von der Sortierung ausgenommen wird und damit stets als Fußzeile der Tabelle angezeigt wird.

Geschachtelte Tabellen

Tabellen können geschachtelt werden:

colspan

A B C
eine Zeile 
{| class="wikitable" style="text-align:center"
! A
! B
! C
|-
| colspan="3" | eine Zeile
|}


rowspan

A eine Spalte
B
C 
{| class="wikitable" style="text-align:center"
! A
| rowspan="3" | eine Spalte
|-
! B
|-
! C
|}


colspan + rowspan

A
B eine Spalte
C 
{| class="wikitable" style="text-align:center"
! colspan="2" style="text-align:center" | A
|- style="text-align:center"
! B
| rowspan="2"| eine Spalte
|- style="text-align:center"
! C
|}


Titel
eine Spalte A B C
D E F 
{| class="wikitable" style="text-align:center"
|-
! colspan="4" | Titel
|-
! rowspan="2" | eine Spalte
| A || B || C
|-
| D || E || F
|}


Tabellen nebeneinander 

<div style="float:left; margin-right:1em;">
{| class="wikitable" 
|+ Linke Tabelle
! Ãœberschrift 1 || Ãœberschrift 2
|-
| Feld 1 || Feld 2
|}
</div>

<div style="float:left;">
{| class="wikitable" 
|+ Rechte Tabelle
! Ãœberschrift 1 || Ãœberschrift 2
|-
| Feld 1 || Feld 2
|}
</div>

<div style="clear:both;" />
Linke Tabelle
Ãœberschrift 1 Ãœberschrift 2
Feld 1 Feld 2
Rechte Tabelle
Ãœberschrift 1 Ãœberschrift 2
Feld 1 Feld 2

<div style="clear:both;" />

Gleich breite Tabellen 

{| class="wikitable"
|-
| style="width:5em" | a: 5em
| style="width:10em" | b: 10em
| style="width:7em" | c: 7em
|}
{| class="wikitable"
|-
| style="width:5em" | a: 5em
| style="width:10em" | b: 10em
| style="width:7em" | c: 7em
|}
a: 5em b: 10em c: 7em
a: 5em b: 10em c: 7em

Listen in Tabellen, Bilder in Tabellen

Tabellen können Tabellen, Bilder und Wiki-Syntax-Formatierung enthalten:

Hyänen
Tüpfelhyäne (Crocuta crocuta)

Tüpfelhyäne (Crocuta crocuta)

Systematik
Überklasse: Kiefermäuler (Gnathostomata)
Klasse: Säugetiere (Mammalia)
Unterklasse: Höhere Säugetiere (Eutheria)
Ordnung: Raubtiere (Carnivora)
Ãœberfamilie: Katzenartige (Feloidea)
Familie: Hyänen
Wissenschaftlicher Name
Hyaenidae
Gray, 1821
Arten

Dieser Text erzeugt die rechte Tabelle, wenn man ihn in einen Artikel eingibt: 

{{Taxobox
| Taxon_Name       = Hyänen
| Taxon_WissName   = Hyaenidae
| Taxon_Rang       = Familie
| Taxon_Autor      = [[John Edward Gray|Gray]], 1821
| Taxon2_Name      = Katzenartige
| Taxon2_WissName  = Feloidea
| Taxon2_Rang      = Ãœberfamilie
| Taxon3_Name      = Raubtiere
| Taxon3_WissName  = Carnivora
| Taxon3_Rang      = Ordnung
| Taxon4_Name      = Höhere Säugetiere
| Taxon4_WissName  = Eutheria
| Taxon4_Rang      = Unterklasse
| Taxon5_Name      = Säugetiere
| Taxon5_WissName  = Mammalia
| Taxon5_Rang      = Klasse
| Taxon6_Name      = Kiefermäuler
| Taxon6_WissName  = Gnathostomata
| Taxon6_Rang      = Ãœberklasse
| Bild             = Crocuta-hejda.jpg
| Bildbeschreibung = [[Tüpfelhyäne]] ''(Crocuta crocuta)''
| Subtaxa_Rang     = Art
| Subtaxa          =
* [[Streifenhyäne]] ''(Hyaena hyaena)''
* [[Schabrackenhyäne]] ''(Hyaena brunnea)''
* [[Tüpfelhyäne]] ''(Crocuta crocuta)''
* [[Erdwolf]] ''(Proteles cristatus)''
}}

Erläuterungen

→ Siehe: Wikipedia:TaxoboxenW-Logo.gif

Hilfen

  • WProW-Logo.gif (Server zur Zeit nicht erreichbar) ist ein Wikipedia-Editor für den Internet Explorer 6.0, der Tabellen per Knopfdruck einfügen und formatieren kann.
  • EXCEL-TabellenumwandlungW-Logo.gif konvertiert den ausgewählten Tabellenbereich aus MS Excel direkt ins Wiki-Tabellenformat. Die wichtigsten Formatierungen wie Fett/Kursiv, Zellenhöhe und -breite, Schriftgröße, Farbinformation aus MS Excel bleiben erhalten.
  • Excel2WikiW-Logo.gif Berücksichtigt verbundene Zellen, dazu auch ein Programm zur Umwandlung der Spalten in Zeilen und umgekehrt und ein Programm zur Zeilenumkehr, d. h. die letzte Zeile wird zur ersten usw.
  • csv2wpW-Logo.gif ist ein Werkzeug zum Umwandeln von CSV-Dateien in Wiki-Tabellenformat. Damit lassen sich z. B. Tabellen aus Microsoft Excel importieren.
  • Ab OpenOffice 2.3 kann man Writer-Dokumente ins Mediawiki-Format exportieren.
  • OpenOffice-Tabellen können mit Calc2Wiki konvertiert werden. Eine Alternative (mit der ein oder anderen Erweiterung) ist Calc2WikiTableW-Logo.gif.
  • Umwandlung von HTML-Tabellen in Wiki-Tabellen

Linkliste

Von „http://wiki.zum.de/Hilfe:Tabellen/mehr“