Hilfe:Tabellen

Aus stfwiki
Wechseln zu: Navigation, Suche

Die Wikisoftware 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.

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. 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, ansonsten sollten einfache Listen verwendet werden.

Einfache Tabelle

Eine einfache Beispieltabelle:

Autor erstes Heft letztes Heft Gesamt Bemerkung
Michelle Stern 79 150 15 Michelle Stern ist ein Pseudonym von Stefanie Jahnke
Sascha Vennemann 81 148 7.5 Lektor der Serie ab ca. Band 50
Simon Borner 100 151 6.5 Pseudonym von Christian Humberg
Jana Paradigi 127 127 1
Guido Seifert 120 148 5
Stan Hamilton 123 140 2 unbekanntes Pseudonym
Thomas Höhl 129 149 2 hat seit Band 126 die redaktionelle Arbeit an Sternenfaust übernommen. Er schreibt jetzt die Exposés der Romane und ist ebenfalls als Autor für die Serie tätig.

Die obige Tabelle wird durch den folgenden Quelltext erzeugt: 

{| class="std_table"
|-
! Autor                                         !! erstes Heft !! letztes Heft !! Gesamt !! Bemerkung 
|-
| [[Michelle Stern]] || 79 || 150 || 15 || Michelle Stern ist ein Pseudonym von Stefanie Jahnke
|-
| [[Sascha Vennemann]] || 81 || 148 || 7.5 || Lektor der Serie ab ca. Band 50 
|-
| [[Simon Borner]] || 100 || 151 || 6.5 || Pseudonym von Christian Humberg
|-
| [[Jana Paradigi]] || 127 || 127 || 1 ||
|-
| [[Guido Seifert]] || 120 || 148 || 5 ||
|-
| [[Stan Hamilton]] || 123 || 140 || 2 || unbekanntes Pseudonym
|-
| [[Thomas Höhl]] || 129 || 149 || 2 || hat seit Band 126 die redaktionelle Arbeit an Sternenfaust übernommen. Er schreibt jetzt die Exposés der Romane und ist ebenfalls als Autor für die Serie tätig.
|}

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="std_table" bewirkt, dass die ganze Tabelle nach den Vorgaben der Klasse std_table 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.

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="std_table 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="std_table sortable" erlaubt die Sortierung der Tabelle nach wählbaren Spalten.
  • Mit class="unsortable" können einzelne Spalten von der Sortierbarkeit ausgenommen werden.

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>
|}
Addition von vier Zahlen
365
+ 123
+ 235
+ 277
1000

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.

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

Der Quelltext hierfür sieht folgendermaßen aus: 

{| class="std_table 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" | 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 Cascading Style Sheets-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 &nbsp; an das Ende.

Verbundene Tabellenzellen

Zellen innerhalb einer Tabelle können verbunden werden:

colspan

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


rowspan

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


colspan + rowspan

A
B eine Spalte
C 
{| class="std_table" 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="std_table"
|+ Linke Tabelle
! Überschrift 1 || Überschrift 2
|-
| Feld 1 || Feld 2
|}
</div>

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

Gleich breite Spalten

{| class="std_table"
|-
| style="width: 5em" | a: 5em
| style="width:10em" | b: 10em
| style="width: 7em" | c: 7em
|}
{| class="std_table"
|-
| 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

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


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.

std_table

Mittels class="std_table" im Tabellenkopf lässt sich eine blaugrau getönte Tabelle mit sichtbaren, wenngleich dezenten Zellgrenzen erstellen. Zwischen Zellinhalt und Rand wird etwas „Luft“ gelassen. Die Standardtabelle ohne std_table 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.

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.

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.

Linksbündig mit Textumfluss
Name Vorname Nachname
Bernd Müller
Hans Zehnder
Stefan Ackermann
Rechtsbündig mit Textumfluss
Name Vorname Nachname
Bernd Müller
Hans Zehnder
Stefan Ackermann

Mit der Klasse „float-left“ (class="std_table float-left") kann eine Tabelle linksbündig mit Textumfluss dargestellt werden. Analog dazu kann mit der Klasse „float-right“ (class="std_table float-right") eine Tabelle rechtsbündig mit Textumfluss dargestellt werden.

Von „http://www.stfwiki.de/wiki/index.php?title=Hilfe:Tabellen&oldid=70“