|
Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Jedoch sollte man Tabellen nicht als grafisches Gestaltungsmittel einsetzen (warum nicht?), sondern nur dann benutzen, wenn zwischen Tabellenzellen und ihren Zeilen und Spalten semantische Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung.
Grundlagen
Jede Tabelle beginnt mit einer geschweiften Klammer { gefolgt von einem senkrechten Strich | und endet mit einem Strich | gefolgt von einer geschweiften Klammer }. Die öffnende Klammer muss als erstes Zeichen der Zeile stehen.
Eine neue Tabellenzeile wird mit |- erzeugt. Innerhalb jeder Zeile können beliebig viele Zellen stehen. Eine Zelle wird mit einem senkrechten Strich am Zeilenanfang (|) eingeleitet.
Mit zwei senkrechten Strichen (||) können mehrere Zellen in einer Textzeile zusammengeschrieben werden.
Eine Tabelle mit zwei Tabellenzeilen mit je zwei Zellen sieht im Text so aus:
{|
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Und stellt sich so dar:
| Zelle 1
|
Zelle 2
|
| Zelle 3
|
Zelle 4
|
Komplexere Tabellen
Rahmen
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {| ) festgelegt, dabei ist zu beachten, eine Leerstelle zu lassen. Momentan kann nur die Rahmenstärke festgelegt werden, mit dem Argument: border="n" wobei n die Stärke des Rahmens ist. An Stelle von border="n" kann die Rahmenstärker auch mit class="wikitable" gestaltet werden.
Beispiel
Das Beispiel border=n sieht mit Rahmen im Text so aus:
{| border="1"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}
und stellt sich so dar:
| Zelle 1
|
Zelle 2
|
| Zelle 3
|
Zelle 4
|
| Zelle 5
|
Zelle 6
|
Bei Verwendung von class="wikitable" sieht der Rahmen so aus:
| Zelle 1
|
Zelle 2
|
| Zelle 3
|
Zelle 4
|
| Zelle 5
|
Zelle 6
|
Durch hinzufügen der class=hintergrungfarbe5 kann die Überschriftzeile farbige hinterlegt werden.
{| class="wikitable"
|- class="hintergrundfarbe5"
! Zelle A !! Zelle B
|-
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}
und stellt sich dann so dar:
| Zelle A |
Zelle B
|
| Zelle 1
|
Zelle 2
|
| Zelle 3
|
Zelle 4
|
| Zelle 5
|
Zelle 6
|
Spaltenbreiten
Spaltenbreiten können relativ und absolut angegeben werden.
Prozentual
Bei prozentualen Spaltenbreiten ist die Angabe der Breiten nur bei jeweils einer Zelle pro Spalte notwendig und sinnvoll. Die Summe der Spaltenbreiten sollte 100 Prozent ergeben.
{| class="wikitable"
! width="15%" | Spaltenbreite 15 %
! width="60%" | Spaltenbreite 60 %
! width="25%" | Spaltenbreite 25 %
|-
| Zelle A
| Zelle B
| Zelle C
|}
und stellt sich so dar:
| Spaltenbreite 15 %
|
Spaltenbreite 60 %
|
Spaltenbreite 25 %
|
| Zelle A
|
Zelle B
|
Zelle C
|
Pixel
Auch bei absoluten Spaltenbreiten ist die Angabe der Breiten nur bei jeweils einer Zelle pro Spalte notwendig und sinnvoll.
{| border="1"
! width="400" | Spaltenbreite 400 Pixel
! width="200" | Spaltenbreite 200 Pixel
! width="100" | Spaltenbreite 100 Pixel
|-
| Zelle A
| Zelle B
| Zelle C
|}
und stellt sich so dar:
| Spaltenbreite 400 Pixel
|
Spaltenbreite 200 Pixel
|
Spaltenbreite 100 Pixel
|
| Zelle A
|
Zelle B
|
Zelle C
|
Rowspanning und Colspanning
Auch mit den neuen Wiki-Befehlen ist es genauso wie bei HTML möglich, eine Zelle über mehrere Zeilen reichen zu lassen, ein so genanntes rowspan.
Um rowspan einzuschalten, muss man vor der betreffenden Zelle, aber unbedingt in der gleichen Zeile, das rowspan-Argument einfügen, etwa in der Form rowspan=n wobei n für die Anzahl der Zeilen steht, über die die Zelle reichen soll. Soll eine Zelle über mehrere Spalten reichen benutze man colspan.
Beispiel
Eine Tabelle, in der Zelle 2 über zwei Spalten reicht, sieht im Text so aus:
{| border=1
|Zelle 1
|rowspan=2 | Zelle 2, mit rowspan
|Zelle 3
|-
|Zelle 4
|Zelle 5
|}
und stellt sich so dar:
| Zelle 1
|
Zelle 2, mit rowspan
|
Zelle 3
|
| Zelle 4
|
Zelle 5
|
Verschachtelte Tabellen
Das Verschachteln ist mit den neuen Wiki-Befehlen denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle, innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf!
Beispiel
Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:
{| border=1
|Zelle 1
|
{| border=2
|Zelle A
|-
|Zelle B
|}
|Zelle 3
|}
und stellt sich so dar:
Beschriftung
Mit den neuen Wiki-Befehlen ist es leicht möglich, eine Beschriftung über der Tabelle zu implementieren. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischem Zeilenumbruch. Um eine Beschriftung einzubauen reicht es nach dem senkrechten Strich und vor dem Text ein Plus + zu setzen. Innerhalb der Beschriftung kann man ganz normal mit Wiki-Befehlen formatieren.
Beispiel
Eine Tabelle, mit Beschriftung, sieht im Text so aus:
{| border=1
|+ Dies ist eine '''Beschriftung''', die ''ziemlich'' lang ist.
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
und stellt sich so dar:
Dies ist eine Beschriftung, die ziemlich lang ist.
| Zelle 1
|
Zelle 2
|
| Zelle 3
|
Zelle 4
|
Farbgestaltung
Für die farbliche Gestaltung des Zellenhintergrundes in einer Tabelle stehen mit zunächst 9 Hintergrundfarben zur Auswahl. Hierzu verwendet man die Syntax: class="hintergrundfarbex"| am Anfang der Tabellenzelle, wobei "x" für die Ziffern 1-9 steht.
{| class="wikitable"
! Hintergrundfarbe
! RGB-Farbcode
|-
| hintergrundfarbe1
| class="hintergrundfarbe1"| #F9F9F9
|-
| hintergrundfarbe2
| class="hintergrundfarbe2"| #FFFFFF
|-
| hintergrundfarbe3
| class="hintergrundfarbe3"| #FFFF40
|-
| hintergrundfarbe4
| class="hintergrundfarbe4"| #FFAA00
|-
| hintergrundfarbe5
| class="hintergrundfarbe5"| #E0E0E0
|-
| hintergrundfarbe6
| class="hintergrundfarbe6"| #B3B7FF
|-
| hintergrundfarbe7
| class="hintergrundfarbe7"| #FFCBCB
|-
| hintergrundfarbe8
| class="hintergrundfarbe8"| #FFEBAD
|-
| hintergrundfarbe9
| class="hintergrundfarbe9"| #B9FFC5
|-
|}
erzeugt folgende Tabelle:
| Hintergrundfarbe
|
RGB-Farbcode
|
| hintergrundfarbe1
|
#F9F9F9
|
| hintergrundfarbe2
|
#FFFFFF
|
| hintergrundfarbe3
|
#FFFF40
|
| hintergrundfarbe4
|
#FFAA00
|
| hintergrundfarbe5
|
#E0E0E0
|
| hintergrundfarbe6
|
#B3B7FF
|
| hintergrundfarbe7
|
#FFCBCB
|
| hintergrundfarbe8
|
#FFEBAD
|
| hintergrundfarbe9
|
#B9FFC5
|
Eine wesentlich weitergehende Möglichkeit zur farblichen Gestaltung des Hintergrundes von einzelnen Tabellenzellen besteht per css-style, womit man jede einzelne Tabellenzelle mit einem beliebigen Farbhintergrund aus dem Spektrum der RGB-Farbcodes gestalten kann. Hierzu verwendet man am Anfang der betreffenden Tabellenzelle die Syntax: style="background-Color:#yyyyyy"| wobei "yyyyyy" für die Nummer des RGB-Farbcodes steht.
Zur Auswahl von RGB-Farbcodes stehen im Web verschiedene Seiten zur Verfügung.[1]
Bilder und Tabellen
Bilder in Tabellen zu formatieren ist mit den neuen Wiki-Befehlen einfacher geworden. Möglich wird dies mit class-Argumenten. Class-Argumente können am Anfang einer Tabelle stehen und gelten dann für die ganze Tabelle (ähnlich wie Rahmen (siehe oben)) oder am Anfang einer Zelle.
Das Interessante ist, dass nicht nur das Bild formatiert wird, sondern auch der zugehörige Text, dies ist zum Beispiel nützlich für Bildunterschriften. Die zwei (?? gibt's noch mehr ??) class-Argumente sind flag und rimage. Sie werden mittels eines class=flag, bzw. class=rimage eingebunden. Mit class=rimage wird die Größe der Zelle auf das Bild ausgedehnt, ein kleiner Abstand um das Bild zum Rahmen wird beibehalten, und der Text verkleinert und zentriert und das ganze auf die rechte Seite geschoben.
Mit class=flag wird der Text zwar ebenfalls zentriert, aber nicht verkleinert und auch nicht auf die rechte Seite verschoben.
Weitere Tabellen-Formate
- Beispiel
| Eigenschaft
|
Bedeutung
|
Einheit
|
| Sdp.20
|
Siedepunkt bei einem Druck von 20 mm Hg
|
Grad Celsius [°C]
|
| d20°/15°
|
Dichte bei 20°C, bezogen auf Wasser bei 15°C
|
[g/cm3]
|
| ηD15
|
Brechzahl für Na- Linie bei 15°C
|
|
| Schmp.
|
Schmelzpunkt
|
Grad Celsius [°C]
|
| [α]D20
|
spez. Drehung der Polarisationsebene bei 20°C
|
Grad [°]
|
| 