Tabellen

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Leere Anzeigehülle

Eingabe Ergebnis

xxx

xxx


Ein- zwei und dreizeilige Tabelle

Eingabe Ergebnis

{|
|Zelle 1
|Zelle 2
|}

Zelle 1 Zelle 2
Eingabe Ergebnis

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

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Eingabe Ergebnis

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

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

Tabellen im Schreibmaschinenstil ohne Formatierungen

Klimatabelle
Monat                   JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ
-----------------------------------------------------------------------
Ø Tagestemperatur °C     21  21  22  23  24  25  27  29  28  26  24  22
Ø Nachttemperatur °C     15  15  15  16  17  18  20  21  20  19  18  16
Ø Sonnenstunden pro Tag   6   6   7   8   9   9   9   9   8   7   6   5
Ø Regentage/Monat         6   4   3   2   2   1   0   0   2   5   6   7
Ø Wassertemperatur °C    19  18  18  18  19  20  21  22  23  23  21  20

Tabellen mit Rahmen

Eingabe Ergebnis

{| border="1"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6
Eingabe Ergebnis

{| border="3"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}

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

Titelzeilen

Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit „!“ statt „|“ eingeleitet werden:

Eingabe Ergebnis

{| border="1"
!Was
!Warum
|-
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}

Was Warum
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Zellen verbinden

Eine Tabelle mit einer Zelle, die über zwei Spalten geht (colspan="2") sieht so aus:

Eingabe Ergebnis

{| border="1"
!A
!B
!C
|-
|Zelle 1
| colspan="2" align="center" | Zelle 2
|-
|Zelle 3
|Zelle 4
|Zelle 5
|}

A B C
Zelle 1 Zelle 2
Zelle 3 Zelle 4 Zelle 5


Eine Tabelle mit einer Zelle, die über zwei Zeilen geht (rowspan="2") sieht so aus:

Eingabe Ergebnis

{| border="1"
!A
!B
!C
|-
|Zelle 1
| rowspan="2" align="center" | Zelle 2
|Zelle 3
|-
|Zelle 4
|Zelle 5
|}

A B C
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5

Leere Zellen in Tabellen mit Rahmen

Leere Zellen werden in einer Tabelle nicht umrahmt. Um in machen Browsern trotzdem einen Rahmen zu bekommen, kann man ein Geschütztes Leerzeichen   setzen.

Eingabe Ergebnis

{| border="1"
!colspan="4" align="center"|'Titel'
|-
|Zelle 1
|Zelle 2
| 
| 
|-
|Zelle 5
| 
| 
|Zelle 8
|-
|Zelle 9
|Zelle 10
|Zelle 11
|Zelle 12
|}

'Titel'
Zelle 1 Zelle 2    
Zelle 5     Zelle 8
Zelle 9 Zelle 10 Zelle 11 Zelle 12

Verschachtelte Tabellen

Das Verschachteln ist mit der neuen Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:

Eingabe Ergebnis

{| border="1"
|Zelle 1
|
{| border="2"
|Zelle A
|-
|Zelle B
|}
|Zelle 3
|}

Zelle 1
Zelle A
Zelle B
Zelle 3

Tabellenbeschriftung

Mit der neuen Wiki-Syntax ist es leicht möglich, eine Beschriftung über der Tabelle anzugeben. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischem Zeilenumbruch. Um eine Beschriftung einzubauen reicht es, nach dem senkrechten Strich und vor dem Text ein Plus + zu setzen. Innerhalb der Beschriftung kann man ganz normal mit der Wiki-Syntax formatieren.

Eine Tabelle mit Beschriftung sieht im Text so aus:

Eingabe Ergebnis

{| border="1"
|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}

Dies ist eine Beschriftung, die ziemlich lang ist.
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Aufzählungszeichen

Will man Aufzählungszeichen in einer Tabelle verwenden, so muss der erste Listeneintrag in einer neuen Zeile beginnen. Andernfalls wird beim ersten Eintrag anstatt eines Aufzählungszeichens ein Sternchen angezeigt.

Eingabe Ergebnis

{| border="1"
|* erster Eintrag
* zweiter Eintrag
|}

* erster Eintrag
  • zweiter Eintrag

{| border="1"
|
* erster Eintrag
* zweiter Eintrag
|}

  • erster Eintrag
  • zweiter Eintrag

Spaltenbreiten

Spaltenbreiten können relativ und absolut angegeben werden. Die Angabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.

Eingabe Ergebnis

{| border="1"
! width="10%" | 10 %
! width="20%" | 20 %
! width="40%" | 40 %
|-
| align="center" |A
| align="center" |B
| align="center" |C
|}

10 % 20 % 40 %
A B C

{| border="1"
! width="50" | 50
! width="100" | 100
! width="200" | 200
|-
| align="center" |A
| align="center" |B
| align="center" |C
|}

50 100 200
A B C

Absolute Angaben in Pixeln sind eher bei Grafiken sinnvoll.

Zellenabstände mit cellspacing und cellpadding

Mit cellspacing kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit cellpadding bestimmt man den Abstand des Zellinhaltes vom Zellrahmen.

Eingabe Ergebnis

{|
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="0"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

Ausrichtung

Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das valign gilt jeweils für die ganze Zeile, das align nur für die jeweilige Zelle.

Eingabe Ergebnis

{| border="1" cellspacing="0" width="100%"
! width="25%" |  
! align="left" width="25%" | Links
! align="center" width="25%" | Zentriert
! align="right" width="25%" | Rechts
|- valign="top"
! height="38" | Oben
| align="left" | xx
| align="center" | xxx
| align="right" | xx
|- valign="middle"
! height="38" | Mitte
| align="left" | x
| align="center" | x
| align="right" | x
|- valign="bottom"
! height="38" | Unten
| align="left" | x
| align="center" | x
| align="right" | x
|}

  Links Zentriert Rechts
Oben xx xxx xx
Mitte x x x
Unten x x x


Andere HTML-Formatierungen

Mit der neuen Wiki-Syntax ist es möglich, alte HTML-Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen (style="background:#ABCDEF;", Farbtabelle) oder Rahmen andere Farben zu geben. Diese Vorgehensweise ist bei neuen Tabellen aber nicht empfohlen.

Eingabe Ergebnis

{|
| style="background:#ABCDEF;" | A
|B
|-
|C
|D
|}

A B
C D