Tabellen

Aus Wiki-Hilfe
Wechseln zu: Navigation, Suche

Tabellen kann man in den Wikis auf ZUM.de leicht erstellen, indem man den Wikitext zu einem Tabellenbeispiel hier auf dieser Seite (unter "Das schreibt man") kopiert, in die gewünschte Seite einfügt und ggf. nach den eigenen Vorstellungen anpasst.

Inhaltsverzeichnis

Tabellen mit dem WikiEditor einfügen

Schnell und intuitiv kann man eine Tabelle mit Hilfe des WikiEditor einfügen. Folgende Schritte sind notwendig:


1. Auf der gewünschten Seiten oben auf "Bearbeiten" klicken
Es öffnet sich ein Eingabefeld, an dessen oberem Rand der WikiEditor erscheint:
Der Button "Tabelle" ist hier hervorgehoben.


2. Auf den Button "Tabelle" (WikiEditor - Button Tabelle.png) klicken
Es öffnet sich ein neues, kleines Fenster "Tabelle einfügen":
Die Voreinstellung zeigt eine Tabelle mit drei Spalten und drei Zeilen sowie darüber eine Überschrift.


3. Mit einem Klick auf "Einfügen" wird dann der folgende WikiText in die zu bearbeitende Seite eingefügt
Dieser Text kann den eigenen Wünschen entsprechend angepasst werden:
Unbearbeiteter WikiText für eine Standardtabelle


Einfache Tabellen

mit class="wikitable"

Spalten nebeneinander notiert - wie mit dem WikiEditor erstellt

Das sieht man Das schreibt man
Überschrift Überschrift Überschrift
Beispiel Beispiel Beispiel
Beispiel Beispiel Beispiel
Beispiel Beispiel Beispiel
{| class="wikitable"
|-
! Überschrift !! Überschrift !! Überschrift
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|-
| Beispiel || Beispiel || Beispiel
|}

Spalten untereinander notiert

Das sieht man Das schreibt man
Spalte A Spalte B Spalte C
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
{| class="wikitable"
! Spalte A
! Spalte B 
! Spalte C
|-
|1.1
|1.2
|1.3
|-
|2.1
|2.2
|2.3
|-
|3.1
|3.2
|3.3
|}

in einfacher Schreibweise

Überschriften nicht hervorgehoben

Das sieht man Das schreibt man
Spalte A Spalte B Spalte C
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
{| 
| Spalte A
| Spalte B 
| Spalte C
|-
|1.1
|1.2
|1.3
|-
|2.1
|2.2
|2.3
|-
|3.1
|3.2
|3.3
|}

Überschriften hervorgehoben

Das sieht man Das schreibt man
Spalte A Spalte B Spalte C
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
{| 
! Spalte A
! Spalte B 
! Spalte C
|-
|1.1
|1.2
|1.3
|-
|2.1
|2.2
|2.3
|-
|3.1
|3.2
|3.3
|}


mit Aufzählungen

Das sieht man Das schreibt man
Spalte A
  • 1.1
  • 1.2
Spalte B
  • 2.1
  • 2.2
Spalte C
  • 3.1
  • 3.2
{|
| Spalte A
*1.1
*1.2
| Spalte B 
*2.1
*2.2
| Spalte C
*3.1
*3.2
|}




Stichworte:

  • von einfachen zum komplexen
  • tabellarische Anordnung, das sieht man..., das schreibt man....
  • einfache Tabelle, Variation Anordnung (links, mitte, rechts)
  • Tabelle mit Überschrift
  • Tabelle mit Bildern
  • Sortierbare Tabellen
  • farbige Tabellen


Einfache Tabelle

Einfache Tabelle - Beispiel

Eine einfache Beispieltabelle aus dem Artikel Diagnose- und Vergleichsarbeiten:

Schulart Klassenstufe Fächer
Grundschule Klasse 2 Deutsch, Mathematik
Hauptschule Klasse 6 Deutsch, Mathematik, Englisch
Realschule Klasse 6 und 8 Deutsch, Mathematik, EWG oder Geschichte
Gymnasium Klasse 6 Deutsch, Mathematik, GWG oder Biologie
Klasse 8 Deutsch, Mathematik, Geschichte oder Physik

Einfache Tabelle - Quellcode

Die obige Tabelle wird durch den folgenden Quelltext erzeugt:

{| class="wikitable"
!Schulart
!Klassenstufe
!Fächer
|-
|Grundschule
|Klasse 2
|Deutsch, Mathematik
|-
|Hauptschule
|Klasse 6
|Deutsch, Mathematik, Englisch
|-
|Realschule
|Klasse 6 und 8
|Deutsch, Mathematik, EWG oder Geschichte
|-
|Gymnasium
|Klasse 6
|Deutsch, Mathematik, GWG oder Biologie
|-
|
|Klasse 8
|Deutsch, Mathematik, Geschichte oder Physik
|}

Einfache Tabelle - Erläuterungen

  • Die Zeichen {| beginnen eine Tabelle, während |} sie abschließen. Beide Tags müssen an einem Zeilenanfang stehen.
  • Das Attribut class="wikitable" veranlasst, dass die ganze Tabelle nach den Vorgaben der Klasse wikitable formatiert wird. Diese sieht unter anderem Trennlinien zwischen den Zellen sowie zusätzlichen Platz zwischen Zelleninhalt und Zellenrand (das sogenannte cellpadding) vor.
  • Zeilen, die mit einem Ausrufezeichen (!) beginnen, definieren Kopfzeilen von Tabellen. Der Text in einer Zelle einer solchen Zeile wird zentriert und fettgedruckt. Gewöhnliche Tabellenzeilen beginnen dagegen mit einem senkrechten Trennstrich (|).
  • Das Tag |- beginnt eine neue Tabellenzeile, falls es im Quelltext an einem Zeilenanfang steht.
  • Die Zeichen || trennen nebeneinanderliegende Tabellenzellen.
  • Die Zeichenfolge   anstatt eines Leerzeichens verhindert einen Zeilenumbruch zwischen den beiden Wörtern, die das Leerzeichen trennt.

Einfache Tabelle mit Aufzählungen

Einfache Tabelle mit Aufzählungen - Beispiel

Beispiel aus der Seite Portfolio im Mathematikunterricht

Leitfragen aus der Lehrerperspektive Themen für die Schüler
Was?
  • Vierecke und ihre Eigenschaften.
  • Worum geht es?
  • Für wen wichtig?
Warum das?
  • Wer hat das erfunden?
  • Wo kommt das vor?
  • Wer braucht das?
  • Was bringt mir das für neue Probleme?
  • Was hilft es, wenn ich das kann?
Wie?
  • Wie sind wir im Unterricht vorgegangen? (Beschreibung des Vorgehens)
  • Wiederholung der Einstiegsaufgabe
Warum so?
  • Historische Begründung

Einfache Tabelle mit Aufzählungen - Quellcode

{| class="wikitable"
!Leitfragen aus der Lehrerperspektive
!Themen für die Schüler
|-
|Was?
|
* Vierecke und ihre Eigenschaften. 
* Worum geht es? 
* Für wen wichtig?
|-
|Warum das?
|
*Wer hat das erfunden?
*Wo kommt das vor?
*Wer braucht das?
*Was bringt mir das für neue Probleme?
*Was hilft es, wenn ich das kann?
|-
|Wie?
|
* Wie sind wir im Unterricht vorgegangen? (Beschreibung des Vorgehens)
* Wiederholung der Einstiegsaufgabe
|-
|Warum so?
|
*Historische Begründung
|}

Einfache Tabelle mit Aufzählungen - Erläuterungen

  • Damit der Aufzählungspunkt (erzeugt durch das Zeichen * am linken Seitenrand) immer richtig angezeigt wird, muss der erste Aufzählungspunkt auch am linken Seitenrand stehen, also unterhalb des senkrechten Striches, der den Beginn einer neuen Tabellenzelle markiert.

Tabelle mit Überschriften oben und links

Tabelle mit Überschriften oben und links - Beispiel

Beispiel aus der Seite Abitur im Fach Deutsch

Leistungskurs Grundkurs
Dramatik
Epik
Lyrik

Tabelle mit Überschriften oben und links - Quellcode

{| class="wikitable"
|
!Leistungskurs
!Grundkurs
|-
![[Dramatik]]
|
* [[Büchner]]: [[Woyzeck]] und [[Georg Büchner/Briefe|Briefe]]
* [[Goethe]]: [[Faust I]]
* [[Schiller]]: [[Don Karlos]]
|
* [[Büchner]]: [[Woyzeck]] und [[Georg Büchner/Briefe|Briefe]]
* [[Goethe]]: [[Faust I]]
* [[Schiller]]: [[Maria Stuart]]
|-
![[Epik]]
|
* [[Fontane]]: [[Irrungen, Wirrungen]]
* [[Kafka]]: [[Das Urteil]]
* Kafka: [[Die Verwandlung]]
* [[Wolf]]: [[Medea. Stimmen]]
|
* [[Hein]]: [[In seiner frühen Kindheit ein Garten]]
* [[Kafka]]: [[Das Urteil]]
|-
![[Lyrik]]
|
* [[Lyrik Brechts]]
* [[Lyrik der Romantik]]
|
* [[Lyrik Brechts]]
* [[Lyrik der Romantik]]
|}

Tabelle mit Überschriften oben und links - Erläuterungen

  • Wichtig ist es, jeweils für eine einzelne Tabellenzelle durch ein ! anzugeben, ob diese als "Überschrift" gekennzeichnet sein soll. Deshalb muss jede Zelle links am Seitenrand beginnend dargestellt werden - durch: | oder !

Tabelle mit Überschriften oben und links - mehr Beispiele

Sortierbare Tabelle

Sortierbare Tabelle - Beispiel

Beispiel aus der Seite Video

Land Video-System Bildübertragungsrate Probleme
USA NTSC 30 fps Übertragungsfehler bei Hauttönen
Europa PAL 25 fps -
Frankreich SECAM - -

Sortierbare Tabelle - Quellcode

{| class="wikitable sortable"
|-
!Land
!Video-System
!Bildübertragungsrate
!Probleme
|-
|USA ||NTSC ||30 fps ||Übertragungsfehler bei Hauttönen
|-
|Europa ||PAL ||25 fps ||-
|-
|Frankreich ||SECAM ||- ||-
|}

Sortierbare Tabelle - Erläuterungen

  • Sortierbare Tabellen werden erzeugt mit der Angabe von class="wikitable sortable" in der ersten Zeile des Quellcodes.


Tabelle mit Überschrift

Tabelle mit Überschrift - Beispiel

Überschrift
Spalte 1 Spalte 2 Spalte 3
Zeile 1, Zelle 1 Zeile 1, Zelle 2 Zeile 1, Zelle 3
Zeile 2, Zelle 1 Zeile 2, Zelle 2 Zeile 2, Zelle 3
Zeile 3, Zelle 1 Zeile 3, Zelle 2 Zeile 3, Zelle 3

Tabelle mit Überschrift - Quellcode

{| class="wikitable"
|+ Überschrift
|-
! Spalte 1 || Spalte 2 || Spalte 3
|-
| Zeile 1, Zelle 1 || Zeile 1, Zelle 2 || Zeile 1, Zelle 3
|-
| Zeile 2, Zelle 1 || Zeile 2, Zelle 2 || Zeile 2, Zelle 3
|-
| Zeile 3, Zelle 1 || Zeile 3, Zelle 2 || Zeile 3, Zelle 3
|}

Tabelle mit zeilenübergreifender Zelle

Tabelle mit zeilenübergreifender Zelle - Beispiel

Spalte 1 Spalte 2 Spalte 3
Zeile 1, Zelle 1 Zeile 1, Zelle 2 Zeile 1, Zelle 3
Zeile 2, Zelle 1 Zeile 2, Zelle 2 Zeile 2, Zelle 3
Zusammenfassung

Tabelle mit zeilenübergreifender Zelle - Quellcode

{| class="wikitable"
! Spalte 1 || Spalte 2 || Spalte 3
|-
| Zeile 1, Zelle 1 || Zeile 1, Zelle 2 || Zeile 1, Zelle 3
|-
| Zeile 2, Zelle 1 || Zeile 2, Zelle 2 || Zeile 2, Zelle 3
|-
| colspan="3" | Zusammenfassung
|}

Tabelle mit zeilenübergreifender Zelle - Erläuterungen

  • colspan="3" gibt an, wie viele Spalten (colums) in einer Zelle zusammengefasst werden sollen, hier also 3.
  • Der erste senkrechte Strich | am linken Seitenrand markiert den Beginn der Zelle. Zwischen diesem und dem zweiten senkrechten Strich | steht die Formatierungsanweisung, hier: colspan="3"

Tabellenausrichtung

class="wikitable float-right"

Bedeutet: border="1" cellspacing="0" cellpadding="4" rules="all" class="hintergrundfarbe1 rahmenfarbe1" style="float:right; clear:right; margin:1em 0 1em 1em; border-style: solid; border-width: 1px; border-collapse:collapse; empty-cells:show;"


Textumlauf links. Aussehen:

Tabellentitel
Titel 1 Titel 2
Zelle A1 Zelle B1 Zelle C1
Zelle A2 Zelle C2
Zelle A3 Zelle B3 Zelle C3

Ach, was muß man oft von bösen Kindern hören oder lesen!   Wie zum Beispiel hier von diesen, Welche Max und Moritz hießen;   Die, anstatt durch weise Lehren Sich zum Guten zu bekehren,   Oftmals noch darüber lachten Und sich heimlich lustig machten.   Ja, zur Übeltätigkeit, Ja, dazu ist man bereit!   (Wilhelm Busch)


Achtung: Fließtext, der neben der Tabelle stehen soll, muss im Quelltext unter den Tabellen-Quelltext geschrieben werden.
Soll der Text jedoch unterhalb der Tabelle stehen, muss zunächst die Zeichenfolge <br style="clear:both"/> eingefügt werden.

class="wikitable float-left"

Bedeutet: border="1" cellspacing="0" cellpadding="4" rules="all" class="hintergrundfarbe1 rahmenfarbe1" style="float:left; clear:left; margin:1em 1em 1em 0em; border-style:solid; border-width:1px; border-collapse:collapse; empty-cells:show;"


Textumlauf rechts. Aussehen:

Tabellentitel
Titel 1 Titel 2
Zelle A1 Zelle B1 Zelle C1
Zelle A2 Zelle C2
Zelle A3 Zelle B3 Zelle C3

Ach, was muß man oft von bösen Kindern hören oder lesen!   Wie zum Beispiel hier von diesen, Welche Max und Moritz hießen;   Die, anstatt durch weise Lehren Sich zum Guten zu bekehren,   Oftmals noch darüber lachten Und sich heimlich lustig machten.   Ja, zur Übeltätigkeit, Ja, dazu ist man bereit!   (Wilhelm Busch)


Fließtext, der neben der Tabelle stehen soll, muss im Quelltext unter den Tabellen-Quelltext geschrieben werden.
Soll der Text jedoch unterhalb der Tabelle stehen, muss zunächst die Zeichenfolge <br style="clear:both"/> eingefügt werden.

class="wikitable centered"

Funktioniert im ZUM-Wiki derzeit nicht!

Kein Textumlauf. Aussehen:

Ach, was muß man oft von bösen Kindern hören oder lesen! Wie zum Beispiel hier von diesen, Welche Max und Moritz hießen; Die, anstatt durch weise Lehren Sich zum Guten zu bekehren,

Tabellentitel
Titel 1 Titel 2
Zelle A1 Zelle B1 Zelle C1
Zelle A2 Zelle B2 Zelle C2
Zelle A3 Zelle B3 Zelle C3

Oftmals noch darüber lachten Und sich heimlich lustig machten. Ja, zur Übeltätigkeit, Ja, dazu ist man bereit! (Wilhelm Busch)

... mehr

→ Hilfe:Tabellen/mehr

Siehe auch



Positionierung von Text und Bild mit Hilfe einer Tabelle

Die verwendete Tabelle hat drei Spalten. Die erste Spalte nimmt 40% der Seitenbreite in Anspruch. Die mittlere Spalte ist leer und stellt der Abstand ( 3% ) zwischen Text und Bild sicher. In der rechten Spalte sitzt das Bild durch valign="top" oben. DBPB 1952 93 Walther Rathenau.jpg
{|

|width="40%"|Die verwendete Tabelle hat drei Spalten. 
Die erste Spalte nimmt 40% der Seitenbreite in Anspruch. 
Die mittlere Spalte ist leer und stellt der Abstand ( 3% )
zwischen Text und Bild sicher. In der rechten Spalte 
sitzt das Bild durch valign="top" oben.

|width="3%"|

|valign="top"|[[Datei:DBPB 1952 93 Walther Rathenau.jpg|100px]]

|}


Zweizeilige Tabelle mit Rahmen und bestimmter Spaltenbreite

A1 B1 C1
A2 B2 C3
{| border="1" cellspacing="0"  valign="top"
| width="5%" | A1  
| width="10%" | B1
| width="20%" | C1
|-valign="top"
| A2
| B2
| C3
|}



Tabelle mit Rahmen, Spaltenbreite, Hintergrundfarbe und Textfarbe

Erste Spalte

Zweite Spalte

Dritte Spalte

{|style="background:#BFEFFF" border="1"
cellspacing="0" cellpadding="4"
|style="vertical-align:top" ; width="50%"|
<span style="color:#990000">Erste Spalte 
|style="vertical-align:top" ; width="25%"|
<span style="color:#009900">Zweite Spalte
|style="vertical-align:top" ; width="25%"|
<span style="color:#000099">Dritte Spalte
|}


2 Spalten

Spalte 1

(die erste hat ein feste Breite 400px)

Spalte 2
{|

|width=400px|Spalte 1

(die erste hat ein feste Breite 400px)
|width=5px|
|valign="top" | Spalte 2

|}

Das sieht man - Das schreibt man

Das sieht man Das schreibt man
Das sieht man Das schreibt man
{| class="wikitable" width="100%"
|-
! Das sieht man !! Das schreibt man
|-
| width="50%" |

| width="50%" |

|}