Wikibooks

Hilfe:Tabellen

Hoch zum Lehrbuch

Allgemeines ...: Sei mutig! – Seite bearbeiten – Vorschau – Sonderzeichen – Rechtschreibung – Typografie – Schreibstil verbessern – Inhaltsverzeichnis einer Seite
Die Spielwiese.: Erste Schritte – Formatierung auf der Spielwiese üben
Textgestaltung.: Zitieren – Farben – Rahmen – Tabellen – Fußnoten – Infoboxen
Weiterführendes: Vorlagen – Formeln mit LaTeX – Andere Inhalte einbinden – Liste von Seiten

Die einfachste Tabelle

Bearbeiten

Sie können für kleine Tabellen einen ganz einfachen Trick wählen: Beginnen Sie jede Tabellenzeile mit einem Leerzeichen. Dann erhalten Sie eine gerahmte Tabelle und die Schriftart   Courier, die jedem Buchstaben genau dieselbe Spaltenbreite zuordnet. 

Spalte 1       Spalte 2        Spalte 3
---------------------------------------
     111            222             333
     aaa            bbb             ccc
     ...            ...             ...
     xxx            yyy             zzz

Man erspart sich die schwierigen Steuerzeichen. Es sollten allerdings nicht zu viele oder zu breite Spalten sein, sonst ragen sie auf Bildschirmen mit geringer Auflösung über den Rand.

Tabelle mit mehreren Tabellenzeilen

Bearbeiten
  • Jede Tabelle beginnt mit einer öffnenden geschweiften Klammer und dahinter einem senkrechten Strich. Formatierungsanweisungen dürfen folgen.
  • Jede Tabellenzeile beginnt mit einem senkrechten Strich.
  • Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter den senkrechten Strich ein Minuszeichen setzt.

Dies lässt sich beliebig oft wiederholen.

  • Eine Tabelle endet mit einem senkrechten Strich, gefolgt von einer schließenden geschweiften Klammer.

Eine einfache Tabelle: 

{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

Ergebnis:

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

Tipp zur Quelltext-Gestaltung

Bearbeiten

Ein Nachteil am Quelltext ist, dass er mitunter recht unübersichtlich ist. 

{| class="prettytable"
| kurz || länger || sehr lang || sehr sehr sehr lang
|-
| länger || sehr lang || sehr sehr sehr lang || kurz
|-
| sehr lang || wirklich enorm extrem übermäßig lang || kurz || länger
|-
| sehr sehr sehr lang || kurz || länger || sehr lang
|}

Man kann die Abstände im Quelltext (Leerzeichen) beliebig groß machen, damit man so leichter die Übersicht behält. Zur Not teilt man eine sehr lange Zeile, die über den Bildschirmrand hinaus gehen würde, einfach in zwei Zeilen auf. Das späteres Nachbearbeiten der Tabelle wird dadurch leichter. 

{| class="prettytable"
| kurz                || länger    || sehr lang               || sehr sehr sehr lang
|-
| länger              || sehr lang || sehr sehr sehr lang     || kurz
|-
| sehr lang           || wirklich enorm extrem übermäßig lang || kurz || länger
|-
| sehr sehr sehr lang || kurz      || länger                  || sehr lang
|}

Die Ausgabe sieht in beiden Fällen gleich aus

kurz länger sehr lang sehr sehr sehr lang
länger sehr lang sehr sehr sehr lang kurz
sehr lang wirklich enorm extrem übermäßig lang kurz länger
sehr sehr sehr lang kurz länger sehr lang

Tabelle mit Rahmen

Bearbeiten

Mit Hilfe von CSS-Klassen lassen sich Tabellen bequem und einheitlich formatieren. Die Klasse "wikitable" ist für den Rahmen und die graue Hintergrundfarbe zuständig. Das ! Ausrufungszeichen markiert eine hervorgehobene Spaltenüberschrift und die blaue Hintergrundfarbe hat auch eine eigene CSS-Klasse.

Verwendung von class="wikitable": 

{| class="wikitable"
! Spalte 1
! Spalte 2
|-
| Zelle 1
| Zelle A
|- class="hintergrundfarbe6" 
| Zelle 2
| Zelle B
|-
| Zelle 3
| Zelle C
|}

Ergebnis:

Spalte 1 Spalte 2
Zelle 1 Zelle A
Zelle 2 Zelle B
Zelle 3 Zelle C

Sortierbare Tabellen

Bearbeiten

Mit Hilfe einer speziellen CSS-Klasse lassen sich auch sortierbare Tabellen erstellen (benötigt Java-Script).

Sortierbare Tabellen: 

{| class="wikitable sortable"
! Spalte 1
! Spalte 2
|-
| Zelle 1
| Zelle A
|-
| Zelle 3
| Zelle B
|-
| Zelle 2
| Zelle C
|}

Ergebnis:

Spalte 1 Spalte 2
Zelle 1 Zelle A
Zelle 3 Zelle B
Zelle 2 Zelle C

Voraussetzung für die Funktion ist, dass die Überschriftszeile mit „!“ (Ausrufezeichen) gebildet wird. Die Sortierung kann mit der Vorlage:SortKey beeinflusst werden.

Tabellenformatierung im Tabellenkopf

Bearbeiten

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:

Verschachteln von Tabellen

Bearbeiten

Die Zellen einer Tabelle müssen nicht ausschließlich mit Text gefüllt sein. Auch Bilder und andere Tabellen können eine Tabelle füllen. Solche verschachtelten Tabellen sind vielseitig verwendbar.

  1. Tabellen belegen mitunter nur einen Teil der Seitenbreite, so dass die Breite des Fensters bzw. des Papiers schlecht ausgenutzt wird.
  2. Mitunter soll eine Tabelle oder ein Bild zur Illustration eines Textes dienen. Tabelle oder Bild neben dem Text zu platzieren dient der Übersicht.
  3. Es ist mitunter schwierig, Komponenten wie Tabellen, Bilder oder Textabschnitte auf eine gewünschte Weise auf der Seite anzuordnen. Je nach Breite des Browserfensters verrutschen die Komponenten auf eine kaum vorhersagbare Weise. Will man die Seite ausdrucken, kommen die Seitenumbrüche als unberechenbarer Faktor hinzu. Insbesonders Bilder werden oft vom dazugehörigen Text getrennt. Die Einbettung in eine Tabelle kann das Problem lösen.

Man sollte darauf achten, dass die Tabelle nicht zu breit wird, weil es Darstellungsprobleme auf geringer auflösenden Bildschirmen (z. B. von Smartphones) geben kann, die bis zur Unlesbarkeit führen können.

Beispiel

A {|class="wikitable" Umfassende Tabelle
B | erste Tabellenzelle (entspricht <td>...</td>)
11 |width="100px" |[[bild:Torchlight help.png|40px]] Kästchen für das Bild 150px breit
C | zweite Tabellenzelle (entspricht <td>...</td>)
21 {| class="wikitable" Beginn der Tabelle im vierten Feld
22 |Z1S1||align="right" width="80px" |Z1S2 Z1S2 breiter und rechtsbündig
23 |-
24 |Z2S1||Z2S2
25 |} Ende des zweiten Feldes
D | dritte Tabellenzelle (entspricht <td>...</td>)
31 === Text ===
32 Es kann auch Text ... was passiert!
E |} Hier endet die umfassende Tabelle

So sieht es aus:

 
Z1S1 Z1S2
Z2S1 Z2S2

Text

Bearbeiten

Es kann auch Text in einem Kästchen stehen.
Verändern Sie mal die Breite des Browserfensters
und sehen Sie, was passiert!

Bemerkungen

  • Die mit den Buchstaben A bis E bezeichneten Zeilen gehören zur übergeordneten Tabelle, gewissermaßen zur „Infrastruktur“.
  • In Zeile 12 wurde die Breite der Zelle festgelegt, damit neben dem Bild mehr Platz ist. Mit align="left" oder align="center" oder align="right" könnte die Position des Bildes festgelegt werden.
  • In Zeile 22 sorgt das width="80px" dafür, dass die zweite Spalte breiter wird. align="right" verschiebt Z1S2 in dem breiten Kästchen nach rechts.
  • Beim grünen Text in Zeile 11 bzw. beim blauen Text in Zeile 22 handelt es sich um jeweils eine Zeile.

Zusatzhinweis

Gemäß einer neuen Philosophie des W3C-Konsortiums sollte die Verwendung von Tabellen für Layoutzwecke oder für die Platzierung von Objekten auf Webseiten vermieden werden. Es wird ein "tableless web layout" angestrebt. Auf Wikibooks steht dafür die Vorlage:Mehrspaltenlayout zur Verfügung. Einzelheiten dazu übersteigen den Zweck dieser Hilfe-Seiten.

Tabellen in Vorlagen

Bearbeiten

Man kann Tabellen auch in Vorlagen einsetzen. Doch wenn man den einfachen Wikisyntax für Tabellen in Vorlagen nutzen will, stellt man schnell fest, dass das nicht funktioniert. Der Grund dafür ist, dass die Software die senkrechten Striche (Pipes, |) als Trennzeichen für übergebene Parameter interpretiert. Um Tabellen in Vorlagen nicht in HTML-Tabellen-Syntax eingeben zu müssen, muss man diese Zeichen maskieren. Dazu gibt es einen Workaround: Man ersetzt den Wikisyntax für die Tabelle mit folgenden Vorlagen. Die Software sorgt dann dafür, dass die richtigen Zeichen in dem eigentlichen Artikel übergeben werden. 

 Wikisyntax              Vorlage

     {|                  {{(!}}
      |                  {{!}}
      |-                 {{!-}}
      |}                 {{!)}}
Bearbeiten

Für Details zum Gebrauch und wo Tabellen nützlich sein können:

Abgerufen von „https://de.wikibooks.org/w/index.php?title=Hilfe:Tabellen&oldid=729171“