Tabellen
Nachdem wir uns im vorherigen Abschnitt mit Listen beschäftigt haben, kommen wir an dieser Stelle zu einer weiteren Möglichkeit, Informationen übersichtlich darzustellen, den Tabellen.
Unter einer Tabelle versteht man eine strukturiere Form von Datensätzen. Liegt eine gewisse Anzahl von Datensätzen vor, liefern Tabellen eine übersichtliche Möglichkeit, viele Informationen gleichzeitig darzustellen. Weiterhin besteht die Möglichkeit, eine Tabelle anhand einer einzelner Spalten zu sortieren, beispielsweise nach Größe (bei Zahlen) oder alphabetisch (bei Namen, Begriffen, ...).
Da die Umsetzung von Tabellen in Wiki-Syntax sehr kompliziert werden kann, sollten sie nur dort verwendet werden, wo sie auch wirklich einen Mehrwert an Übersichtlichkeit für den Leser bieten. Beispielsweise ist es nicht sinnvoll, nur zwei oder drei einzelne Punkte in einer Tabelle darzustellen. An dieser Stelle sollte man lieber auf Listen zurückgreifen.
Grundlagen
In Wiki-Syntax beginnt jede Tabelle mit einer öffnenden geschweiften Klammer { gefolgt von einem senkrechten Strich | und endet mit einem senkrechten Strich | gefolgt von einer schließeden geschweiften Klammer }. Die öffnende Klammer muss das erste Zeichen in einer Zeile sein.
Innerhalb dieser beiden Klammern beginnt jede Zelle mit einem senkrechten Strich. Dahinter steht dann entweder der Inhalt der Zelle oder Attribute, wie beispielsweise die Textausrichtung der Zelle, dazu aber später mehr. Wie bei der öffnenden geschweiften Klammer sollte auch der senkrechte Strich für jede Zelle zu Beginn der Textzeile stehen, um die Tabelle im Quelltext übersichtlich zu halten. Sollte man dennoch mal mehrere Zellen in einer Textzeile schreiben wollen, so werden diese mit zwei senkrechten Strichen || getrennt. Um eine neue Zeile der Tabelle hinzuzufügen, wird ein senkrechter Strich mit einem Bindestrich |- eingefügt. Die Zellen, die danach definiert werden, befinden sich dann in der nächsten Zeile der Tabelle.
| Eingabe | Ergebnis | ||||||||
|---|---|---|---|---|---|---|---|---|---|
{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}
|
bzw. | {|
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6
|}
|
| ||||||
Wichtiger Hinweis: Bei der Erstellung von Tabellen sind Zeilenumbrüche unabdingbar, das heißt Konstrukte wie {| |Zelle |} funktionieren nicht!
Das obige Beispiel sieht zunächst sehr unschön aus, da die einzelnen Zellen nicht - wie bei einer Tabelle üblich - durch Linien getrennt werden. Um dies zu ändern, gibt es bereits einige vorgefertigte Klassen, die wichtige Stile für Tabellen bereitstellen. Um eine solche Klasse für eine Tabelle zu verwenden, wird nach dem ersten senkrechten Strich class="wikitable" hinzugefügt. Das Ergebnis sieht wie folgt aus:
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{| class="wikitable"
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}
|
|
Wie du siehst, wurden durch die Klasse wikitable Rahmenlinien um die einzelnen Zellen hinzugefügt, was die gesamte Tabelle übersichtlicher erscheinen lässt. Weitere Klassen, die zur Verfügung stehen, werden weiter unten erläutert.
Kopfzeilen und Kopfspalten
Viele Tabellen besitzen noch eine sogenannte Kopfzeile. Um eine Kopfzeile in einer Wiki-Tabelle zu realisieren, werden die einzelnen Spalten nicht mittels eines senkrechten Strichs eingeleitet, sondern durch ein Ausrufezeichen !. Dadurch wird der Text in den Kopfzeilen automatisch zentriert und fett dargestellt. Des Weiteren liefert die oben erwähnte Klasse wikitable für die Kopfzeile die rote Hintergrundfarbe des Wikis.
Kopfspalten werden analog definiert, indem man die erste Zelle einer Zeile ebenfalls mit einem ! anstelle eines | einleitet.
Layout
Oft ist es sinnvoll, oder sogar notwendig, einzelne oder mehrere Zellen der Tabelle anders zu formatieren. Welche Möglichkeiten ist gibt, werden wir dir in diesem Abschnitt zum Thema Layout zeigen.
Wie du bereits gesehen hast, werden einzelne Zellen durch vertikale Striche getrennt. Um nun eine Formatierung für diese Zelle vorzunehmen, muss vor dem senkrechten Strich ein zusätzlicher Befehl, meist in Form von style="Attribut1:Wert1; Attribut2:Wert2" angegeben werden. Im Folgenden werden die wichtigsten dieser Befehle kurz anhand einiger Beispiele erläutert.
Überschriften und Trennstriche
Eine Überschrift für die gesamte Tabelle kann durch ein |+ realisiert werden. Diese Zeichenfolge wird zusammen mit dem Text der Überschrift vor die erste Zeile (Kopfzeile eingeschlossen) gesetzt. Bedenke, dass nach der Überschrift eine neue Zeile mit |- eingeleitet werden muss.
Trennstriche erhält man über das Attribut border für alle vier Ränder bzw. die Varianten border-top, border-bottom, border-left und border-right für den oberen, unteren, linken bzw. rechten Rand. Mögliche Werte sind zum Beispiel 1pt black solid für eine dünne, schwarze, durchgezogene Linie oder medium solid für eine dickere durchgezogene Linie. Gepunktete oder gestrichelte Linien erhält man, indem man solid durch dotted bzw. dashed ersetzt.
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{|class="wikitable"
|+ style="padding-bottom:1em"|Dies ist eine Tabellenüberschrift!
|-
|style="border-right:medium solid"| Zelle 1
| Zelle 2
|-
|style="border-right:medium solid; border-bottom:medium dotted"| Zelle 3
|style="border-bottom:medium dashed"| Zelle 4
|-
|style="border-right:medium solid"| Zelle 5
| Zelle 6
|}
|
|
Übrigens sind diese Befehle auch bei der Überschrift möglich, wie das obige Beispiel zeigt. Durch das Attribut padding-bottom wird ein unterer Abstand mit einer Höhe von 1em eingefügt. Dabei ist die Einheit em von der Schriftart abhängig und bezeichnet lediglich die Schriftgröße.
Spaltenbreite und Textausrichtung
Häufig ist es sinnvoll, den einzelnen Spalten eine feste Breite zuzuweisen. Dazu verwendet man das Attribut width mit einem möglichen Prozentwert 25%, der einer Spalte 25% der Gesamtbreite der Tabelle zuweist. Möglich sind auch absolute Einheiten, wie zum Beispiel 3cm (sollte vermieden werden, da derartige Angaben bei jedem Nutzer anders aussehen) oder 3em.
Für die horizontale Textausrichtung innerhalb einer Zelle gibt es das Attribut text-align mit den Werten left, right, center und justify. Letzterer Wert steht für Blocksatz. Für eine vertikale Ausrichtung wird das Attribut vertical-align mit den Werten top, middle und bottom verwendet.
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{|class="wikitable"
|-
|style="width:35%"| Schmale Spalte
|style="width:65%"| Breite Spalte
|-
|style="text-align:left"| links
|style="text-align:right"| rechts
|-
|style="text-align:center; vertical-align:top"| mittig und oben
|style="text-align:justify"| Das ist ein Blocksatz. Das ist ein Blocksatz. Das ist ein Blocksatz.
|}
|
|
Beachte: Falls ein Wort länger als die zugewiesene Spaltenbreite ist, so wird die Spaltenbreite automatisch vergrößert, so dass das Wort in die Spalte passt. Bei mehreren Wörtern wird nur ein automatischer Zeilenumbruch hinzugefügt.
Zellfärbung
Um eine Zellfärbung vorzunehmen, verwendet man das Attribut background mit einem hexadezimalen Farbwert, vor dem eine Raute # steht, zum Beispiel #112233. Hinter der Raute werden die Farbanteile nach dem RGB-Schema (Rot-Grün-Blau) jeweils als zweistellige Hexadezimalzahlen angeben, das heißt von 00 für 0 % bis FF für 100 %. Beispielsweise werden die reinen Farben Rot, Grün und Blau entsprechend durch #FF0000, #00FF00 und #0000FF angegeben. Man kann als Wert auch den für alle Browser standardisierten englischen Namen benutzen, wie darkred</tt für Dunkelrot oder lightblue für Hellblau.
Verwendet man diesen Befehl direkt hinter |-, so wird die komplette nachfolgende Zeile eingefärbt. Durch einen erneuten Befehl vor einer einzelnen Zelle dieser bereits eingefärbten Zeile, wird für diese einzelne Zeile der Wert überschrieben, das heißt die Farbangaben von einzelnen Zellen überschreiben die Farbangaben der ganzen Zeile.
| Eingabe | Ergebnis | ||||
|---|---|---|---|---|---|
{| class="wikitable"
|-style="background:#00AA00"
| A
| B
| style="background:lightblue"|C
| D
|}
|
|
Zeilenumbruch, Aufzählung und Texteinrückung
Selbstverständlich ist es auch möglich, innerhalb von Zellen Zeilenumbrüche, Aufzählungen oder Texteinrückungen zu verwenden. Die folgenden Beispiele zeigen die einfache Anwendung in Tabellen. Sie funktionieren ähnlich wie im normalen Text.
Ein Zeilenumbruch wird über das Tag <br /> realisiert. Ein einfacher Zeilenumbruch im Quelltext reicht nicht aus, da dieser für die Strukturierung der Tabellen benötigt werden und somit nicht als herkömmlicher Zeilenumbruch interpretiert wird.
| Eingabe | Ergebnis | |
|---|---|---|
{| class="wikitable"
|
Zeile 1
|
|
Aufzählungen kann man wie im normalen Text genauso in Tabellen verwenden. Exemplarisch zeigen wir dies hier für *, es funktioniert aber auch für # und :.
| Eingabe | Ergebnis | |
|---|---|---|
{| class="wikitable"
|
*Zeile 1
*Zeile 2
*Zeile 3
|}
|
|
Eine Texteinrückung erreicht man mittels des sogenannten cell paddings. Dazu wird entweder das Attribut padding-left oder padding-right zusammen mit einer Längenangabe, zum Beispiel cm oder em verwendet.
| Eingabe | Ergebnis | ||||
|---|---|---|---|---|---|
{| class="wikitable"
|-
| Linksbündig
|
|
Verbundene Tabellenzellen
Wie man es von Tabellenkalkulationen kennt, ist es auch bei uns im Wiki möglich, mehrere Tabellenzellen zu verbinden. Dabei kann eine Zelle entweder mit den rechts (colspan) oder unten (rowspan) angrenzenden Zellen verbunden werden.
colspan
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{| class="wikitable"
| A
| B
| C
|-
|colspan="3"| eine Zeile
|}
|
| ||||||
rowspan
| Eingabe | Ergebnis | ||||
|---|---|---|---|---|---|
{| class="wikitable"
| A
|rowspan="3" style="vertical-align:middle"| eine Spalte
|-
| B
|-
| C
|}
|
|
colspan + rowspan
| Eingabe | Ergebnis | |||||
|---|---|---|---|---|---|---|
{| class="wikitable"
|colspan="2" style="text-align:center"| A
|- style="text-align:center"
| B
|rowspan="2" style="vertical-align:middle"| eine Spalte
|-
| C
|}
|
| |||||
Anmerkungen zu Tabelleninhalten
Manchmal möchte man zu einem bestimmten Tabelleninhalt eine Anmerkung machen. Dann ist es sinnvoll, die entsprechenden Anmerkungen direkt unter die Tabelle zu setzen und nicht erst am Ende des gesamten Artikels, wie es bei den Einzelnachweisen der Fall ist.
| Eingabe | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{| class="wikitable"
! Spalte 1
! Spalte 2
|-
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4Eine Anmerkung, die zu lang ist und die Tabellenformatierung erheblich beeinträchtigen würde.
|}
|
|
Tabellenklassen
Wie weiter oben schon erwähnt wurde, gibt es für Tabellen bereits vorgefertigte Klassen, die bestimmte Stile enthalten. So ist es möglich, die Syntax für Tabellen übersichtlich zu halten, aber dennoch sinnvolle Formatierungen für Tabellen erhalten zu können. In diesem Abschnitt stellen wir dir kurz einige dieser Klassen vor. Eine Klasse verwendet man, indem man den Befehl class="Klassenname" im Tabellenkopf, das heißt nach den Zeichen {| einfügt.
wikitable
In den obigen Beispielen wurde stets die Klasse wikitable verwendet. Diese erzeugt Zellen mit einem hellgrauen Hintergrund und einem roten Tabellenkopf. Darüber hinaus werden Zellränder hinzugefügt. Für die meisten Tabellen ist diese Klasse ausreichend und sollte daher auch zur Erstellung einer einfachen Tabelle benutzt werden. Benutzt man keine Klasse, so ist der Zellhintergrund transparent und es werden keine Zellränder hinzugefügt.
wikitable sortable
Diese Klasse erzeugt sortierbare Spalten. Im Tabellenkopf werden Pfeile hinzugefügt, die eine aufsteigende oder absteigende Sortierung der Spalte angeben. Durch einen Klick auf den Tabellenkopf einer Spalte, lässt sich die Sortierreihenfolge dieser Spalte ändern.
wikitable mw-datatable
Diese Klasse erzeugt eine Tabelle mit weißen Zellen. Der Vorteil bei dieser Klasse besteht darin, dass die Zeile, auf der sich der Mauszeiger befindet, farblich hervorgehoben wird, was die Lesbarkeit besonders bei Tabellen mit vielen Spalten deutlich erhöht.
wikitable mw-collapsible
Mittels dieser Klasse kann man Tabellen ein- und ausklappen. Diese Klasse sollte man jedoch vermeiden, da dies in den meisten Fällen eher zu mehr Unübersichtlichkeit führt und es dem Leser keine Hilfe darstellt.
wikitable center
Durch diese Klasse wird die Breite der Tabelle auf die Breite des Artikelbereichs gestreckt.
wikitable centered
Mit Hilfe dieser Klasse lässt sich eine Tabelle mittig auf der Seite zentrieren. Im Gegensatz zu wikitable center wird die Tabelle nicht gestreckt.
Kombinationen
Die obigen Klassen können miteinander kombiniert werden. So ist zum Beispiel auch die Klasse wikitable sortable center möglich.