In diesem Abschnitt soll es darum gehen, wie Formatierungen im Tabellenkopf das Aussehen der gesamten Tabelle verändern können. Wir benutzen die folgende einfache Beispieltabelle:
- Was wir schreiben
{|class="wikitable"
|+ <big>Einfaches Beispiel</big>
! Spalte 1 || Spalte 2 || Spalte 3
|-
| Z1S1 || Z1S2 || Z1S3
|-
| Z2S1 || Z2S2 || Z2S3
|}
|
und was wir dadurch erhalten
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
Bei den nachfolgenden Beispielen wird nur der Kopf (die erste Zeile) einer Tabellen-Definition verändert. Genauer: Das class="wikitable"
der obigen Beispieltabelle wird durch etwas anderes ersetzt, nämlich durch verschiedene HTML-Attribute. Der restliche Körper bleibt immer der selbe.
- Einfacher Rahmen
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Rahmen mit Schatten
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Nur Außenumrandung
{|border="1" rules="none"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Gitternetz und Rahmen
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Gitternetz und dicker Rahmen
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Gitternetz
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Reihen gruppieren
{|border="1" rules="rows"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Spalten gruppieren
{|border="1" rules="cols"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Zelleninnenabstand erweitern
{|border="1" cellpadding="10"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Zellenaußenabstand erweitern
{|border="1" cellspacing="20"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
|
Das Style-Attribut
- Hintergrund-Farbe
{| style="background:yellow;"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Rahmen-Farbe
{|style="border: 2px solid green;"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Zentrieren von Text
{|style="text-align:center"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
- Text rechtsbündig
{|style="text-align:right"
Einfaches Beispiel
Spalte 1 |
Spalte 2 |
Spalte 3
|
Z1S1 |
Z1S2 |
Z1S3
|
Z2S1 |
Z2S2 |
Z2S3
|
|
Für Details zum Gebrauch und wo Tabellen nützlich sein können: