Hilfe:Tabellen

Aus Starcraft Wiki

Die Wiki-Software bietet eine eigene Syntax, um Tabellen darzustellen. Diese Syntax ist zwar an das verbreitete HTML angelehnt, erleichtert jedoch durch eine vereinfachte Schreibweise die Arbeit an komplizierteren Tabellen. Diese Seite bietet eine Kurzübersicht, wie Tabellen erstellt werden. Eine ausführliche Darstellung findet sich in der Wikipedia-Tabellen-Referenz.

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. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.

Wann Tabellen einsetzen?

Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Sie helfen die Beziehungen zwischen Tabellenzellen und ihren Zeilen und Spalten zu verstehen. Insbesondere als sortierbare Tabellen bieten sie einen schnellen Überblick beispielsweise über Jahreszahlen, Namen oder Orte.

Andererseits sind Tabellen komplizierter zu erstellen als normaler Text. Deshalb sollten sie nur dort eingesetzt werden, wo sie tatsächlich für bessere Übersicht sorgen. So ist auch immer zu überlegen, ob die Informationen nicht besser in einer einfachen Liste unterzubringen sind (siehe Textgestaltung und Listen).

Tabellen sollte man nicht als „grafisches Gestaltungsmittel“ einsetzen.

Einfache Tabelle

Eine einfache Beispieltabelle aus dem Artikel Bayern-Landshut:

Die obige Tabelle wird durch den folgenden Quelltext erzeugt:

{| class="wikitable"
|-
! Name                                          !! Regierungszeit                                !! Abstammung
|-
| [[Stephan II. (Bayern)|Stephan&nbsp;II.]]     || <tt>1347–1375</tt> Herzog von Bayern          || Sohn Kaiser Ludwigs&nbsp;IV.
|-
| [[Friedrich (Bayern)|Friedrich]]              || <tt>1375–1393</tt> Herzog von Bayern-Landshut || Sohn Stephans&nbsp;II.
|-
| [[Heinrich XVI. (Bayern)|Heinrich&nbsp;XVI.]] || <tt>1393–1450</tt> Herzog von Bayern-Landshut || Sohn Friedrichs
|-
| [[Ludwig IX. (Bayern)|Ludwig&nbsp;IX.]]       || <tt>1450–1479</tt> Herzog von Bayern-Landshut || Sohn Heinrichs&nbsp;XVI.
|-
| [[Georg (Bayern)|Georg]]                      || <tt>1479–1503</tt> Herzog von Bayern-Landshut || Sohn Ludwigs&nbsp;IX.
|}

Erläuterungen

• Die Zeichenfolge (Tag) {| beginnt eine Tabelle, während |} sie abschließt. Beide Tags müssen im Quelltext an einem Zeilenanfang stehen.
• Das Attribut class="wikitable" bewirkt, dass die ganze Tabelle nach den Vorgaben der Klasse wikitable formatiert wird. Diese sieht unter anderem Trennlinien zwischen den Zellen, zusätzlichen Platz zwischen Zelleninhalt und Zellenrand (das sogenannte cellpadding) sowie einen angedunkelten Hintergrund für durch ! markierte Kopfzeilen vor.
• Zeilen, die mit einem Ausrufezeichen (!) beginnen, definieren Kopfzeilen von Tabellen. Der Text in einer Zelle einer solchen Zeile wird zentriert und fett gedruckt. Gewöhnliche Tabellenzeilen beginnen dagegen mit einem senkrechten Trennstrich (|).
• Das Tag |- beginnt eine neue Tabellenzeile, falls es im Quelltext an einem Zeilenanfang steht.
• Die Zeichen || bzw. !! trennen nebeneinander liegende Tabellenzellen.
• Nebeneinander liegende Zellen können auch durch einen Zeilenumbruch gefolgt von einem einfachen |-Zeichen dargestellt werden (siehe nächste Tabelle).
• Die Zeichenfolge   anstatt eines normalen Leerzeichens verhindert einen Zeilenumbruch zwischen den beiden Wörtern, die dieses geschützte Leerzeichen umschließen.
• Die Jahreszahlen werden durch <tt> mit fester Zeichenbreite dargestellt, um sicherzugehen, dass sie gleichmäßig untereinander ausgerichtet werden.

Sortierbare Tabelle

Sortierbare Tabellen ermöglichen verschiedene und vom Leser wählbare Sichtweisen auf eine Sache. Dazu muss class="sortable" im Tabellenkopf angegeben werden.

Diese sortierbare Tabelle wird durch folgenden Code erzeugt:

{| class="wikitable sortable"
! 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
|}

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.

Bei der Verwendung von Namen und Zahlen sorgen Vorlagen für die richtige Sortierung. Hier die wichtigsten Fälle:

Diese sortierbare Tabelle wird durch folgenden Code erzeugt:

{| class="wikitable sortable"
|-
! Text !! Name !! Jahreszahl !! Datum !! Zahlen
|-
| Bernd Müller
| {{SortKeyName|Bernd|Müller}}
| style="text-align:right" |{{SortKey|1850}}um 1850
| {{dts|1|3|2005}}
| style="text-align:right" |{{nts| 2,00}} m
|-
| Hans Zehnder
| {{SortKeyName|Hans|Zehnder}}
| style="text-align:right" |1840
| {{dts|5|1|2005}}
| style="text-align:right" |{{nts| 1,30}} m
|-
| Stefan Ackermann
| {{SortKey|Ackermann}}Stefan Ackermann
| style="text-align:right" |1860
| {{dts|1|1|2005}}
| style="text-align:right" |{{nts| 1,55}} m
|}

Erläuterungen

• Die Vorlage:SortKeyName sortiert nach Nachname und setzt einen Link.
• Bei Stefan Ackermann und um 1850 sorgt die Vorlage:SortKey für die richtige Sortierung abweichend von der Anzeige.
• Die Vorlage:dts formatiert und sortiert Datumsangaben und die Vorlage:nts Zahlen.

Ausführliche Informationen zur Sortierung und über nicht sortierbare Zeilen siehe Hilfe:Tabellen-Referenz#Sortierbare Tabellen.

Layout

Tabellenüberschriften, Trennstriche

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

{| 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:

Der Quelltext hierfür sieht folgendermaßen aus:

{| class="wikitable sortable"
|+ style="padding-bottom:1em;" | Kaiser der Flavischen Dynastie [[…]]
|- class="hintergrundfarbe6"
! 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" class="hintergrundfarbe5" | 89   || Gegenkaiser in Germanien, gefallen
|}

Erläuterungen

• 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".
• Andere Hintergrundfarben können mittels |- class="hintergrundfarbeX" nach |- für die ganze Zeile oder | für eine einzelne Zelle vergeben werden, wobei das X für eine Zahl von 1 bis 9 steht, die wiederum eine von 9 Standardfarben gemäß Hilfe:Farben#Hintergrundfarben bezeichnet. Außerhalb des Artikelnamensraumes können Farben außer durch ihren englischen Namen auch als sechs hexadezimale Zeichen eingegeben werden, wobei die ersten beiden für die Intensität des Rotanteils von 00 bis ff (0 bis 256 dezimal) stehen, die nächsten beiden für den Grünanteil und die letzten beiden 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.
• Leere Zellen können durch einen einfachen Abstand erzeugt werden, sie werden beim Sortieren an den Anfang gestellt, solche mit   an das Ende.

Verbundene Tabellenzellen

Zellen innerhalb einer Tabelle können verbunden werden:

colspan

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

rowspan

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

colspan + rowspan

{| 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
|}

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>

Gleich breite Spalten

{| 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
|}

Anmerkung
Auf Pixelangaben (also auf Angaben mit der Einheit px statt em) sollte verzichtet werden.

Listen in Tabellen, Bilder in Tabellen

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

Vorlage:Taxobox

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:Taxoboxen

CSS-Klassen für Tabellen

Um Tabellen sowohl in ihren Inhalten als auch bereits im Kopfbereich weitgehend 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 ohne wikitable ist rahmenlos und hat einen weißen Hintergrund, was für Layout-Zwecke teilweise erwünscht ist, sich jedoch in bestimmten Fällen zu schlecht vom Text absetzt.

Die Klasse prettytable mit einem ganz ähnlichen Anspruch sollte nicht mehr verwendet werden, um die Kohärenz der Stilmittel zwischen den verschiedenen Wikipedias zu fördern. Sie wurde (Altlasten sind noch vorhanden) ausschließlich in der deutschsprachigen Wikipedia verwendet, sieht aber genauso aus.

sortable

Mittels class="sortable" werden Spalten sortierbar. Das heißt, wenn JavaScript für die Wikipedia 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 Sortierfunktion und -symbol unterdrückt. Mit der gleichen Angabe können auch einzelne Tabellenzeilen von der Sortierung ausgenommen werden.

Siehe auch: MediaWiki Handbook - Sorting, Tabellen:Sortierbare Tabelle

zebra

Mittels class="zebra", das nur in Kombination mit wikitable verwendbar ist, werden die Zeilen einer Tabelle abwechselnd hervorgehoben. Das besondere daran ist, ist dass die Hervorhebung beim Sortieren der Tabelle nicht mitsortiert wird. Beim Einsatz dieser Klasse sollte bedacht werden, ob es wirklich dem Leser hilft. Dies könnte z. B. bei Tabellen mit vielen Spalten und Zeilen der Fall sein. Dieser Zusatz wird von einigen Browsern, beispielsweise vom Internet Explorer 8, nicht unterstützt. Die abwechselnde Hervorhebung lässt sich durch eine zusätzlich für die gesamte Tabelle definierte Hintergrundfarbe verstärken.

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 Tabellenzelle.

Kombinationen

Die genannten vier 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.

Ausrichtung der Tabelle

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.

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 Zentrierung 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.

Probleme mit der class="wikitable"

Am 23. Februar 2008 wurde die „Vorlage:Prettytable“ als „veraltet“ gelöscht und somit endgültig von der CSS-class="wikitable" ersetzt (zu finden in MediaWiki:Common.css). Daneben existiert auch die class="prettytable", diese sollte aber nicht mehr verwendet werden, da die deutschsprachige Wikipedia die einzige war, welche diese Klasse verwendete. Im Zuge der Internationalisierung und für den Export ist es hilfreich, wenn sie nicht mehr verwendet wird.^[1]

Diese Umstellung ist in mancherlei Hinsicht nicht nur ein Segen. So kann mit class="wikitable" beispielsweise das cellpadding (die „Zellen-Polsterung“) anscheinend nicht mehr in einem Rutsch für die ganze Tabelle verändert/definiert werden^{[WP:FZW-Archiv: Juni 2008]}. Wo deshalb „unbedingt“ nötig, kann statt {| class="wikitable" doch noch eine Entsprechung der „Vorlage:Prettytable“ verwendet werden:

• border="1" cellpadding="4" style="margin:1em 1em 1em 0; background:#f9f9f9; border:1px #AAA solid; border-collapse:collapse; empty-cells:show;"

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"

Siehe auch

• Positionierung von Bildern in Tabellen
• Wikipedia-Tabellen-Referenz – Ausführlichere Darstellung der MediaWiki-Tabellensyntax