WaBis

walter.bislins.ch

Tabellen Formatieren

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:

Rahmen Wiki CSS
Keinen Rahmen um Tabelle noborder style="border:none;"
Gitternetz anzeigen grid nur über Stylesheet ausserhalb Tabelle möglich

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.

Attribut Wiki CSS
Tabellen- oder Spaltenbreite w:100%
w:600px
style="width:100%;"
style="width:600px;"
Minimale Breite minw:600px style="min-width:600px;"
Scrollende Tabelle scroll
scroll:600px
keine Entsprechung
Scrollen verhindern noscroll keine Entsprechung

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

Breite 20% Breite 30% 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
|}

50 100 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.

Ausrichtung Wiki-Syntax
links l = left (standard)
rechts r = right
zentriert c = center
links u. rechts j = justify
Ausrichtung Wiki-Syntax
oben t = top
mitte m = middle
unten b = bottom

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

Links Zentriert Rechts
Oben x x x
Mitte x x x
Unten x x 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:

Klasse Auswirkung
$compressed verkleinert den Zeilenabstand auf ein Minimum
$wide entfernt den Rahmenabstand links der ersten und rechts der letzten Spalte
$padding vergrössert den horizontalen Abstand von Spalten und verkleinert den Abstand von Zeilen
$nopadding enfernt alle Abstände jeder Zelle, sodass Zelleninhalte direkt aneinandergefügt werden (praktisch für Bilder in Tabellen-Zellen)

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

123.400
3.150
15.000
0.654
{| 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

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

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>

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

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

Zelle1 Zelle2 Zelle3
Zelle4 Zelle5 Zelle6
Zelle7 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.

Weitere Infos zur Seite
Erzeugt Mittwoch, 5. Juli 2006
von wabis
Zum Seitenanfang
Geändert Samstag, 18. Juli 2015
von wabis