Dieses Wiki verwendet weitgehend dieselbe Syntax wie die Wikipedia. Das bedeutet, dass Tabellen aus der Wikipedia meist einfach durch Kopieren in dieses Wiki übernommen werden können. Dieses Wiki vereinfacht jedoch das Erstellen von Tabellen, indem für viele Format-Anweisungen Abkürzungen definiert sind. Diese gelten nur für dieses Wiki. Willst du Tabellen erstellen, welche du später in die Wikipedia kopieren kannst, so verwende nur die Wikipedia-Syntax (HTML-Attribute und CSS-Angaben), nicht aber die hier beschriebenen Abkürzungen.

Rahmen

Durch Wiki Schlüsselwörter oder CSS-Attribute kannst du den Rahmen um eine Tabelle oder um Zellen beeinflussen:

Beispiel Rahmen per Stylesheet

<style>
.Wiki table.myTable { border:2px solid blue; }
.Wiki table.myTable td { border:1px solid gray; padding: 0 0.5em; }
</style>

{| $myTable
 :

In der ersten .Wiki Zeile wird der Rahmen um die ganze Tabelle definiert. In der zweiten Zeile der Rahmen einer Tabellen-Zelle (td-Element in HTML), was einem Gitter entspricht. Die Tabelle, welche diese Styles erhalten soll, muss einfach mit der entsprechenden Klasse $myTable ausgezeichnet werden, wie im Beispiel oben gezeigt.

Tabellen- oder Spaltenbreiten

Spaltenbreiten können relativ (in Prozent) oder absolut (in Pixel) angegeben werden. Die Angabe ist nur bei einer Zelle pro Spalte notwendig und sinnvoll.

Die Prozent-Angabe für die Spalten bezieht sich auf die Breite der Tabelle. Die Breite der Tabelle sollte deshalb auch definiert werden. Dies kann auf gleiche Art wie in den Zellen geschehen: w:100%

Die Breitenangaben können in Wiki-Syntax (w:n) oder in HTML-Syntax (width="n") oder in Stylesheets (style="width:n;") erfolgen. Am Einfachsten ist die Wiki-Syntax, welche intern in Stylesheet-Angaben umgewandelt wird.

Hinweis: Es können auch andere Elemente scrollbar gemacht werden: siehe Makro scroll.

Standardmässig sind alle Tabellen der untersten Stufe scrollbar. D.h. es erscheint ein horizontaler Scrollbalken, wenn die Tabelle nicht auf die Fensterbreite gestaucht werden kann. Verschachtelte Tabellen werden standardmässig nicht gescrollt.

Mit scroll kann das Scrollen einer Tabelle erzwungen werden. Optional kann dabei eine Mindestbreite für die Tabelle angehängt werden: scroll:600px. Dies entspricht der Kombination scroll und minw:600px. Mit noscroll kann verhindert werden, dass bei einer Tabelle horizontale Scrollbalken eingeblendet werden. In diesem Fall ragt aber die Tabelle eventuell über den Seitenrand hinaus und der Browser zeigt einen horizontalen Scrollbar für die Seite an.

{| grid w:100%
! w:20% | Breite 20%
! w:30% | Breite 30%
! w:50% | Breite 50%
|-
| A
| B
| C
|}

Absolute Angaben in Pixel sind eher bei Grafiken sinnvoll:

{| grid
! w:50  | 50
! w:100 | 100
! w:200 | 200
|-
| A
| B
| C
|}

Ausrichtung

Du kannst den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten, entweder über Stylesheets, oder direkt in den Zellen wie nachfolgend vorgeführt.

Beispiel

{| grid
!             !! Links   !! Zentriert !! Rechts
|- h:45
! l t | Oben  || l t | x || c t | x   || r t | x
|- h:45
! l m | Mitte || l m | x || c m | x   || r m | x
|- h:45
! l b | Unten || l b | x || c b | x   || r b | x
|}

Eingebaute CSS-Klassen für die Tabellen-Formatierung

Im Wiki sind ein paar nützliche CSS-Klassen definiert, mit denen das Aussehen von Tabellen modifiziert werden kann:

Zahlen am Dezimalpunkt ausrichten

Leider gibt es in HTML und CSS keine funktionierenden Attribute, die einem das Ausrichten von Zahlen am Dezimalpunkt ermöglichen. Es muss daher zu folgendem Trick gegriffen werden:

• Die Zahlen müssen in der Zelle rechts ausgerichtet werden
• Die Zahlen müssen nach dem Komma oder Punkt alle gleich viele Zeichen haben
• Packe die Zahlen in das Makro pad, um unwichtige Stellen zu verbergen

Beispiel Zahlen am Dezimalpunkt ausrichten

{| grid
|r| {{pad|123.4|00}}
|-
|r| {{pad|3.15|0}}
|-
|r| {{pad|15|.000}}
|-
|r| {{pad|0.654}}
|}

Durch das Makro pad wird der Teil hinter dem zweiten | unsichtbar gemacht, aber es wird trotzdem entsprechend viel Platz reserviert. Auf diese Weise kann man die rechtsbündig ausgerichteten Zahlen so platzieren, dass ihr Dezimalpunkt untereinander zu stehen kommt.

Inline-Stylesheet Angaben

Durch ein vordefiniertes Style-Sheet haben Tabellen bereits einen Rahmen und einen bestimmten Abstand zwischen den Zellen. Diese und weitere Attribute können jedoch direkt in der Tabelle überschrieben bzw. neu definiert werden:

{| Stylesheet-Angaben für ganze Tabelle hier definieren
| Styles für eine Zelle hier | Zelleninhalt || ...
|- Styles für eine ganze Zeile hier
:

Beispiel

{| grid noscroll $FloatRight style="border:4px dashed green;"
|Zelle 1
|Zelle 2
|-
| style="background-color:#ff0; color:red;" | Zelle 3
|Zelle 4
|- style="background-color:yellow;"
|Zelle 5
|Zelle 6
|}

$FloatRight ist ein vordefinierter Style, welcher ein Element rechts auf der Seite platziert und ihm einen gewissen Abstand zum umfliessenden Text gibt.

Darstellung über Stylesheet-Klassen festlegen

Format-Anweisungen lassen sich auch in einem Stylesheet ausserhalb der Tabelle definieren. Dies hat den Vorteil, dass diese Formatierungen von mehreren Tabellen gleichzeitig genutzt werden können. Der Bezug von der Tabelle zum Stylsheet geschieht über sog. Klassen-Namen. Beispiel:

<style>
.Wiki table.myTable { 
  background-color:#DDDDFF; border:2px solid red; }
.Wiki table.myTable th { 
  background:none; background-color:#000088; color:#FFFFFF; text-align:left; }
.Wiki table.myTable td.red { 
  background-color:#FFAAAA; } 
</style>

Der Selektor .Wiki bewirkt, dass die Formatanweisungen sich nur auf Tabellen beziehen, die innerhalb des Wiki-Textes definiert sind und nicht das Seitenlayout verändern, welches vielleicht auch über Tabellen erstellt worden ist. myTable ist in diesem Beispiel der Klassen-Name. Nur Tabellen, welche diesen Klassen-Namen verwenden, sind von den entsprechenden Format-Anweisungen betroffen.

Beispiel

{| $myTable         oder in HTML  {| class="myTable"
!Zelle 1                          !Zelle 1
!Zelle 2                          !Zelle 2
|-                                |-
|Zelle 3                          |Zelle 3
|Zelle 4                          |Zelle 4
|-                                |-
|Zelle 5                          |Zelle 5
| $red |Zelle 6                   | class="red" |Zelle 6
|}                                |}

Tipp: Für immer wieder benötigte Formatierungen kannst du Makros definieren. Im folgenden Beispiel wird ein Makro hili definiert, welches zum setzen der Hintergrundfarbe verwendet werden kann:

{{*hili|style="background-color:gray;"*}}

{| grid
|            Zelle1 || {{hili}} | Zelle2 || Zelle3
|-
| {{hili}} | Zelle4 ||            Zelle5 || {{hili}} | Zelle6
|-
|            Zelle7 || {{hili}} | Zelle8 || Zelle9
|}

Eine sehr gute Anleitung, wie mit HTML Tabellen strukturiert werden können, findest du bei de.selfhtml.org.

Mehr über Styles (CSS-Eigenschaften) findest du auf derselben Website unter de.selfhtml.org.