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
  • {|border="1"
Einfaches Beispiel
Spalte 1 Spalte 2 Spalte 3
Z1S1 Z1S2 Z1S3
Z2S1 Z2S2 Z2S3
Rahmen mit Schatten
  • {|border="2"
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
  • {|border="1" rules="all"
Einfaches Beispiel
Spalte 1 Spalte 2 Spalte 3
Z1S1 Z1S2 Z1S3
Z2S1 Z2S2 Z2S3
Gitternetz und dicker Rahmen
  • {|border="3" rules="all"
Einfaches Beispiel
Spalte 1 Spalte 2 Spalte 3
Z1S1 Z1S2 Z1S3
Z2S1 Z2S2 Z2S3
Gitternetz
  • {|rules="all"
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: