Hilfe:Start/ Tabellenpositionierung

Aus Wikibooks

Normalerweise werden Tabellen in Wiki-Seiten linksbündig ohne Textumfluss dargestellt. Eine andere Darstellung kann mit speziellen CSS-Klassen erreicht werden.

Wir nehmen wieder die einfache Beispiel-Tabelle der vorigen Seite:

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

Diese Tabelle wird jetzt mit einfachem Text verbunden; dieser Text steht in Vorlage:Blindtext und wird mit {{Blindtext}} {{Blindtext}} {{Blindtext}} aufgerufen.

Tabelle linksbündig, Text fließt um die Tabelle

{| class="wikitable float-left"

Einfaches Beispiel
Spalte 1 Spalte 2 Spalte 3
Z1S1 Z1S2 Z1S3
Z2S1 Z2S2 Z2S3

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabelle rechtsbündig, Text fließt um die Tabelle

{| class="wikitable float-right"

Einfaches Beispiel
Spalte 1 Spalte 2 Spalte 3
Z1S1 Z1S2 Z1S3
Z2S1 Z2S2 Z2S3

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabelle zentriert, Text fließt nicht um die Tabelle

{| class="wikitable centered" Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Einfaches Beispiel
Spalte 1 Spalte 2 Spalte 3
Z1S1 Z1S2 Z1S3
Z2S1 Z2S2 Z2S3

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabelle zentriert und auf Seitenbreite gebracht

{| class="wikitable center"

Einfaches Beispiel
Spalte 1 Spalte 2 Spalte 3
Z1S1 Z1S2 Z1S3
Z2S1 Z2S2 Z2S3

Weitere Erläuterungen

siehe Ausrichtung der Tabelle (Wikipedia)