Quelltext der Seite Hilfe:Tabellen

{{Index-Hilfe}}
{{WikiWaldhof Grundlagen}}
'''Tabellen''' sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Jedoch sollte man Tabellen nicht als grafisches Gestaltungsmittel einsetzen, sondern nur dann benutzen, wenn zwischen Tabellenzellen und ihren Zeilen und Spalten semantische Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung.

Andererseits sind Tabellen komplizierter als normaler Text. Deshalb sollten sie nur dort eingesetzt werden, wo sie tatsächlich für bessere Übersicht sorgen. Überlege immer, ob du die Informationen nicht auch in einer einfachen Liste unterbringen kannst (siehe [[Hilfe:Textgestaltung|Textgestaltung]]).

== Grundlagen ==

Jede Tabelle im Wiki-Stil beginnt mit einer geschweiften Klammer '''{''' gefolgt von einem senkrechten Strich '''<nowiki>|</nowiki>''' und endet mit einem Strich '''<nowiki>|</nowiki>''' gefolgt von einer geschweiften Klammer '''}'''. Die öffnende Klammer '''muss''' als erstes Zeichen der Zeile stehen. (Ausnahme: Tabellen im Schreibmaschinenstil)

== Einfache Tabellen ==
Jede Zeile innerhalb der beiden Klammern beginnt mit einem senkrechten Strich. Dieser macht den Beginn einer neuen Zelle deutlich. Direkt hinter diesem Strich steht entweder der Inhalt der Zelle oder Attribute (z.&nbsp;B. Rowspanning – siehe unten). Der Strich kann am Anfang der Textzeile stehen oder auch mittendrin, dann muss man zwei Striche schreiben. Jedoch sollte man ihn nur am Anfang einer Textzeile verwenden, um die Tabellenstruktur übersichtlich zu halten. Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.

Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:
{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>|Zelle 2</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{|
|Zelle 1
|Zelle 2
|}
|}

Bitte beachten:
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| |Einzelzelle |}</nowiki>
</div>
funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil.

=== Tabelle mit mehreren Tabellenzeilen ===
Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten ''-'' setzt.
Dies lässt sich beliebig oft wiederholen.

{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>|Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 3</nowiki><br />
<nowiki>|Zelle 4</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{|
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
|}
Eine Tabelle mit drei Zeilen sieht im Text so aus:

<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>|Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 3</nowiki><br />
<nowiki>|Zelle 4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 5</nowiki><br />
<nowiki>|Zelle 6</nowiki><br />
<nowiki>|}</nowiki><br />
</div>

Und stellt sich so dar:

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

und so weiter.

Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit '''||''' trennen:

<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>|Zelle 1||Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 3||Zelle 4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 5||Zelle 6</nowiki><br />
<nowiki>|}</nowiki><br />
</div>

=== Tabellen im Schreibmaschinenstil ohne Formatierungen ===
Die einfachste und schnellste ''„[[Wiki|WikiWiki]]“''-Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil (siehe auch [[Hilfe:Textgestaltung|Hilfe Textgestaltung – vorformatierter Text mit einem Leerzeichen am Zeilenanfang]]). Dazu stellt man jeder Tabellenzeile ein Leerzeichen voran. Spalten und Layout werden visuell im Bearbeitungsmodus angepasst. Das Ergebnis entspricht anschließend genau der Ansicht im Bearbeitungsmodus. Dabei sollte bedacht werden, dass diese Formatierung die Breite der Druckversion nicht überschreitet (ca. 780&nbsp;px bei Normalschriftgröße) und auf kleineren Bildschirmen, PDAs etc. ärgerlich sein kann .

'''Beispiel und Ergebnis:'''

 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

== Komplexere Tabellen ==

=== Rahmen ===
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem '''{|''') festgelegt. Momentan kann nur die Rahmenstärke festgelegt werden, mit dem Argument: '''border="x"''', wobei '''x''' die Stärke des Rahmens ist.

Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>|Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 3</nowiki><br />
<nowiki>|Zelle 4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 5</nowiki><br />
<nowiki>|Zelle 6</nowiki><br />
<nowiki>|}</nowiki>
</div>

und stellt sich so dar:
{| border="1"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}

Mit border="3" erhält man

{| border="3"
|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:
{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>!Was</nowiki><br />
<nowiki>!Warum</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>|Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 3</nowiki><br />
<nowiki>|Zelle 4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 5</nowiki><br />
<nowiki>|Zelle 6</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{| border="1"
!Was
!Warum
|-
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|-
|Zelle 5
|Zelle 6
|}
|}

=== Rowspanning und Colspanning ===
Auch mit der neuen Wiki-Syntax ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen oder Spalten reichen zu lassen, ein so genanntes ''rowspan'' bzw. ''colspan''. Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip

<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>| Attribute | Inhalt</nowiki>
</div>

Eine Tabelle mit einer Zelle, die über zwei Spalten geht (colspan="2") sieht so aus:
{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>!A</nowiki><br />
<nowiki>!B</nowiki><br />
<nowiki>!C</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>| colspan="2" align="center" | Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 3</nowiki><br />
<nowiki>|Zelle 4</nowiki><br />
<nowiki>|Zelle 5</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|
{| border="1"
!A
!B
!C
|-
|Zelle 1
| colspan="2" align="center" | 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|geschütztes HTML-Leerzeichen]] '''&amp;nbsp;''' setzen. So sieht normalerweise eine Tabelle mit Leerzellen aus:

{| border="1"
!colspan="4" align="center"|'normal'
|-
| Zelle 1
| Zelle 2
|
|
|-
|
|
|
|
|-
| Zelle 9
|
|
| Zelle 12
|-
| Zelle 13
| Zelle 14
| Zelle 15
| Zelle 16
|}

Das gleiche Beispiel mit geschützten HTML-Leerzeichen im Text:
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>!colspan="4" align="center"|'Titel'</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 1</nowiki><br />
<nowiki>| Zelle 2</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 9</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| &amp;nbsp;</nowiki><br />
<nowiki>| Zelle 12</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Zelle 13</nowiki><br />
<nowiki>| Zelle 14</nowiki><br />
<nowiki>| Zelle 15</nowiki><br />
<nowiki>| Zelle 16</nowiki><br />
<nowiki>|}</nowiki>
</div>

und stellt sich so dar:
{| border="1"
!colspan="4" align="center"|'sicherer'
|-
| Zelle 1
| Zelle 2
| &nbsp;
| &nbsp;
|-
| &nbsp;
| &nbsp;
| &nbsp;
| &nbsp;
|-
| Zelle 9
| &nbsp;
| &nbsp;
| Zelle 12
|-
| Zelle 13
| Zelle 14
| Zelle 15
| Zelle 16
|}

=== 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:
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>|</nowiki><br />
<nowiki>{| border="2"</nowiki><br />
<nowiki> |Zelle A</nowiki><br />
<nowiki> |-</nowiki><br />
<nowiki> |Zelle B</nowiki><br />
<nowiki> |}</nowiki><br />
<nowiki>|Zelle 3</nowiki><br />
<nowiki>|}</nowiki>
</div>

und stellt sich so dar:
{| border="1"
|Zelle 1
|
{| border="2"
 |Zelle A
 |-
 |Zelle B
 |}
|Zelle 3
|}

=== Beschriftung ===
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:
{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.</nowiki><br />
<nowiki>|Zelle 1</nowiki><br />
<nowiki>|Zelle 2</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Zelle 3</nowiki><br />
<nowiki>|Zelle 4</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{| border="1"
|+ 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.

{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>|* erster Eintrag</nowiki><br />
<nowiki>* zweiter Eintrag</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|
{| border="1"
|* erster Eintrag
* zweiter Eintrag
|}
|-
|<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>|</nowiki><br />
<nowiki>* erster Eintrag</nowiki><br />
<nowiki>* zweiter Eintrag</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|

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

== Formatierungen ==

Farben, Ränder, Abstände und Spaltenbreiten können durch [[Cascading Style Sheets|CSS]]-''Styles'' vielfältig beeinflusst werden. Bevor man sich dazu entschließt, sollte man über die [[Notwendigkeit]] des Unterfangens nachgedacht haben und auch Bestrebungen zur [[Standardisierung|Vereinheitlichung]] berücksichtigen (''siehe [[WikiWaldhof:Wie sehen gute Artikel aus#Tabellen einbinden|"Tabellen einbinden"]] in [[WikiWaldhof:Wie sehen gute Artikel aus|"Wie sehen gute Artikel aus"]] und [[Hilfe:Tabellen#Formatvorlagen|Formatvorlagen]]'').

=== Spaltenbreiten ===
Spaltenbreiten können relativ und absolut angegeben werden. Die Angabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.
{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>! width="10%" | 10&amp;nbsp;%</nowiki><br />
<nowiki>! width="20%" | 20&amp;nbsp;%</nowiki><br />
<nowiki>! width="40%" | 40&amp;nbsp;%</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|A</nowiki><br />
<nowiki>|B</nowiki><br />
<nowiki>|C</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{| border="1"
! width="10%" | 10&nbsp;%
! width="20%" | 20&nbsp;%
! width="40%" | 40&nbsp;%
|-
|A
|B
|C
|}
|-
|<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>! width="50" | 50</nowiki><br />
<nowiki>! width="100" | 100</nowiki><br />
<nowiki>! width="200" | 200</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|A</nowiki><br />
<nowiki>|B</nowiki><br />
<nowiki>|C</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{| border="1"
! width="50" | 50
! width="100" | 100
! width="200" | 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.

{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>|Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{|
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1"</nowiki><br />
<nowiki>|Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|
{| border="1"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
|-
|<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1" cellspacing="10" cellpadding="0"</nowiki><br />
<nowiki>|Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{| border="1" cellspacing="10" cellpadding="0"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1" cellspacing="0" cellpadding="10"</nowiki><br />
<nowiki>|Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|
{| border="1" cellspacing="0" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
|-

|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1" cellspacing="10" cellpadding="10"</nowiki><br />
<nowiki>|Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|
{| border="1" cellspacing="10" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
|-
|<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"</nowiki><br />
<nowiki>|Alpha || Beta || Gamma</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Delta || Epsilon || Zeta</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
|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.
{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| border="1" cellspacing="0"</nowiki><br />
<nowiki>!</nowiki><br />
<nowiki>! align="left" | Links</nowiki><br />
<nowiki>! align="center" | Zentriert</nowiki><br />
<nowiki>! align="right" | Rechts</nowiki><br />
<nowiki>|- valign="top" </nowiki><br />
<nowiki>! height="38" | Oben</nowiki><br />
<nowiki>| align="left" | xx</nowiki><br />
<nowiki>| align="center" | xxx</nowiki><br />
<nowiki>| align="right" | xx</nowiki><br />
<nowiki>|- valign="middle" </nowiki><br />
<nowiki>! height="38" | Mitte</nowiki><br />
<nowiki>| align="left" | x</nowiki><br />
<nowiki>| align="center" | x</nowiki><br />
<nowiki>| align="right" | x</nowiki><br />
<nowiki>|- valign="bottom" </nowiki><br />
<nowiki>! height="38" | Unten</nowiki><br />
<nowiki>| align="left" | x</nowiki><br />
<nowiki>| align="center" | x</nowiki><br />
<nowiki>| align="right" | x</nowiki><br />
<nowiki>|}</nowiki>
</div>
|
{| border="1" cellspacing="0"
!
! align="left" | Links
! align="center" | Zentriert
! align="right" | 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
|}
|}

=== 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;"'', [[Hilfe:Farben|Farbtabelle]]) oder Rahmen andere Farben zu geben. Diese Vorgehensweise ist bei neuen Tabellen aber nicht empfohlen.
{| {{Prettytable}}
! {{Highlight1}} |Eingabe
! {{Highlight1}} |Ergebnis
|-
|
<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{|</nowiki><br />
<nowiki>| style="background:#ABCDEF;" | A</nowiki><br />
<nowiki>|B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|C</nowiki><br />
<nowiki>|D</nowiki><br />
<nowiki>|}</nowiki><br />
</div>
|
{|
| style="background:#ABCDEF;" | A
|B
|-
|C
|D
|}
|}

== Formatvorlagen ==

Einige Benutzer haben [[Hilfe:Vorlagen|Vorlagen]] erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem <code>{|</code> einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling, die Einhaltung der Konvention [[Hilfe:Farben#Farben verwenden|"Farben verwenden"]] ([[Hilfe:Farben|Farben]]) sowie einfache Anpassung des Layouts bei allen Tabellen.

Beispielsweise diese Tabelle:

{| border="1" cellpadding="2"
|+ Multiplikation
|-
! &times; !! A !! B !! C
|-
! 1
| I || II || III
|-
! 2
| IV || V || VI
|-
! 3
| VII || VIII || IX
|-
! 4
| x || XI || XII
|-
! 5
| XIII || XIV || XV
|}

wird durch einfaches Ersetzen von <code>border="1" cellpadding="2"</code> durch <code><nowiki>{{Prettytable}}</nowiki></code> zu:

{| {{Prettytable}}
|+ Multiplikation
|-
! &times; !! A !! B !! C
|-
! 1
| I || II || III
|-
! 2
| IV || V || VI
|-
! 3
| VII || VIII || IX
|-
! 4
| x || XI || XII
|-
! 5
| XIII || XIV || XV
|}

Dies ist der Fall, da die Vorlage [[Vorlage:Prettytable]] den folgenden Code enthält:
: <code>{{Prettytable}}</code>

Ein weiteres Beispiel:

<div style="background:#f7f8ff; border:1px solid #8888aa; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
<nowiki>{| {{Prettytable}}</nowiki><br />
<nowiki>!Treffpunkt Y- u. X-Achse</nowiki><br />
<nowiki>!Exempel</nowiki><br />
<nowiki>!Beispiel</nowiki><br />
<nowiki>!Muster</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|X1</nowiki><br />
<nowiki>| {{highlight1}} | X2</nowiki><br />
<nowiki>|X3</nowiki><br />
<nowiki>|X4</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Y1</nowiki><br />
<nowiki>| {{highlight2}} | Y2</nowiki><br />
<nowiki>|Y4</nowiki><br />
<nowiki>| {{highlight3}} | Y5</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|Y6</nowiki><br />
<nowiki>|Y7</nowiki><br />
<nowiki>| {{highlight4}} | Y8</nowiki><br />
<nowiki>| {{highlight5}} | Y9</nowiki><br />
<nowiki>|}</nowiki>
</div>

erstellt folgende Tabelle:

{| {{Prettytable}}
!Treffpunkt Y- u. X-Achse
!Exempel
!Beispiel
!Muster
|-
|X1
| {{highlight1}} | X2
|X3
|X4
|-
|Y1
| {{highlight2}} | Y2
|Y4
| {{highlight3}} | Y5
|-
|Y6
|Y7
| {{highlight4}} | Y8
| {{highlight5}} | Y9
|}



== Hilfen ==

* '''[[http://de.wikipedia.org/wiki/Benutzer:PeerBr/WPro WPro]]''' ist ein Wikipedia-Editor für den [[Internet Explorer]] 6.0, der Tabellen per Knopfdruck einfügen und formatieren kann.
* '''[[http://de.wikipedia.org/wiki/Wikipedia:Textverarbeitung/EXCEL-Tabellenumwandlung EXCEL-Tabellenumwandlung]]''' konvertiert den ausgewählten Tabellenbereich aus MS Excel direkt ins Wiki-Tabellenformat. Die wichtigsten Formatierungen wie Fett/Kursiv, Zellenhöhe und -breite, Schriftgröße, Farbinformation aus MS Excel bleiben erhalten.
* '''[[http://de.wikipedia.org/wiki/Wikipedia:Textverarbeitung/Excel2Wiki Excel2Wiki]]''' Berücksichtigt verbundene Zellen, dazu auch ein Programm zur Umwandlung der Spalten in Zeilen und umgekehrt und ein Programm zur Zeilenumkehr, d.h. die letzte Zeile wird zur ersten usw.
* '''[[http://de.wikipedia.org/wiki/Benutzer:Duesentrieb/csv2wp csv2wp]]''' ist ein Werkzeug zum Umwandeln von CSV-Dateien in Wiki-Tabellenformat. Damit lassen sich z.B. Tabellen aus Microsoft Excel importieren.
* [[http://de.wikipedia.org/wiki/Wikipedia:Helferlein/Chemie-Tabellengenerator Tabellengenerator für chemische Verbindungen]]
* [[http://de.wikipedia.org/wiki/Benutzer:Hedwig_in_Washington/XLS Excel-Diagramm als JPG-Bild speichern]]

[[Kategorie:WikiWaldhof:Hilfe|Tabellen]]